Как создать вложенное меню каталога в верхней панели

Пример реализации есть на демо маркетплейс - https://marketplace.web-automation.ru/

Как реализовать подобное меню: 

1. В CommonStyle добавляем ссылку на CSS файл содержанием (/js/catmenu/catmenu.css):

.cat-menu {
    display: none;
    width: 200px;
}

.cat-menu-dropdown.show .cat-menu {
    display: block;
    position: absolute;
    z-index: 2;
}

    .cat-menu-dropdown.show .cat-menu > ul {
        margin-bottom: 0;
    }

.cat-menu-group {
    width: 200px;
    page-break-inside: avoid;
}

.cat-menu-additionalContent {
    width: 200px;
}

.cat-menu-groups {
    column-count: 3;
    column-gap: 10px;
}

.cat-menu-item-content {
    display: none;
    position: absolute;
    left: 200px;
    z-index: 99;
    top: 0px;
}

.cat-menu-item.show .cat-menu-item-content {
    display: block;
}

.cat-menu-item-label > a:hover {
    text-decoration: none;
}

.cat-menu-item.show .cat-menu-item-label {
    z-index: 100;
}

.cat-menu-img {
    max-width: 160px;
    max-height: 160px;
}
@media (max-width: 768px) {
    .cat-menu-item-content {
        position: static;
    }

    .cat-menu-groups {
        column-count: 1;
    }
}

2. В настройке CommonScripts добавляем скрипт (/js/catmenu/catmenu.js):

as.catMenu = {
    init: function () {
        $('.cat-menu-cont').removeClass('hide');
        $(document).on('click', '.cat-menu-dropdown-toggle', function () {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            $dropdown.toggleClass('show');
            $menuItems.removeClass('show');
        });

        $(document).on('click', function (e) {
            let $dropdown = $('.cat-menu-dropdown');
            let $menuItems = $('.cat-menu-item');
            if (!$dropdown.has(e.target).length) {
                $dropdown.removeClass('show');
                $menuItems.removeClass('show');
            }
        });

        $(document).on('click', '.cat-menu-item-label', function () {
            let $menuItems = $('.cat-menu-item');
            let $item = $(this).closest('.cat-menu-item');
            $menuItems.not($item).removeClass('show');
            $item.toggleClass('show');
        });
    }
}

$(function () {
    as.catMenu.init();
});

3. Добавляем разметку через HTML блок в GetLayout SELECT 1 в параметр TopNavbarText

declare @catalogMenu2 nvarchar(max) =''
@catalogMenuTitle nvarchar(max) = ''

exec [dbo].[as_block]
		@code ='catalogMenu2',
		@itemID =0,
		@parameters = default,
		@res = @catalogMenu2  OUTPUT

select @catalogMenu2 TopNavbarText

4. Реализуем блок HTML (через SQL функцию блока): https://pastebin.com/iD0ivmcQ

Вариант чисто разметки без HTML блока: 

<div class="cat-menu-cont hide">
	<div class="cat-menu-dropdown position-relative d-inline-block">
    <a href="#" class="btn-sm mx-2 btn btn-light  d-inline-block cat-menu-dropdown-toggle"><i class="fas fa-bars"></i></a>
    <div class="cat-menu shadow-sm mt-1">
      <header class="p-2 bg-light font-weight-bold"><i class="fas fa-list"></i> Категории</header>
	  <ul class="list-unstyled position-relative">
        <li class="cat-menu-item border-bottom">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-mobile-alt"></i> Телефоны</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 1</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 2</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 3</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 4</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 5</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
        <li class="cat-menu-item">
          <div class="cat-menu-item-label position-relative p-2 bg-white">
            <a href="#" class="text-dark"><i class="fas fa-carrot"></i> Овощи</a>
          </div>
          <div class="cat-menu-item-content shadow-sm bg-white">
            <div class="d-flex flex-wrap flex-md-nowrap">
              <ul class="list-unstyled cat-menu-groups p-2">
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 6</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 7</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 8</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 9</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
                <li class="cat-menu-group">
                  <header class="font-weight-bold"><a href="#" class="text-dark">Категория 10</a></header>
                  <ul class="list-unstyled">
                    <li><a href="#" class="text-dark">Подкатегория 1</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 2</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 3</a></li>
                    <li><a href="#" class="text-dark">Подкатегория 4</a></li>
                  </ul>
                </li>
              </ul>
              <div class="cat-menu-additionalContent d-flex flex-wrap align-content-start">
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
                <div class="p-2 m-1 text-center border flex-grow-1">STUFF</div>
              </div>
            </div>
          </div>
        </li>
      </ul>


    </div>
  </div>
</div>