Сделал следующим образом, решение взял из темы Современная
стили
/* Категории */
.catContainer {
background: #6a7077;
height: 0px!important;
}
/*.newcategory {
float: left;
margin: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}*/
ul.newcategory > li {
/* margin-bottom: 0;*/
position: static;
transition: ease-in-out 0.2s;
}
/*.t-dropdown.open {
background-color: rgba(0, 0, 0, 0.5);
}*/
@media (min-width: 768px) {
.newcategory>li {
float: left;
}
}
.newcategory>li {
position: relative;
display: block;
}
.t-dropdown {
transition: 0.3s;
}
ul.newcategory > li > a {
background-color: #6a7077;
color: #fff;
letter-spacing: -0.05px;
line-height: 28px;
padding: 15px 20px 0px 0px;
z-index: 21;
}
.newcategory .open>a, .newcategory .open>a:hover, .newcategory .open>a:focus {
/* background-color: #eee;
border-color: #337ab7;*/
color: #77e0c3;
}
@media (min-width: 768px) {
.newcategory>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
.newcategory>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.newcategory>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
}
.open>a {
outline: 0;
}
.t-dropdown.open > .t-dropdown-menu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
display: block;
}
.t-dropdown-menu {
display: none;
background-color: #6a7077;
box-shadow: none;
top: 20px;
left: 0;
position: absolute;
width: 100%;
-webkit-transform: translateY(-115%);
-moz-transform: translateY(-115%);
-ms-transform: translateY(-115%);
transform: translateY(-115%);
transition: 0.3s;
overflow: hidden;
z-index: 20;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: -10px;
}
/*.container-fluid {
max-width: 1540px;
}
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}*/
.t-nav-catalog-list__inner {
margin: 30px 0;
}
.t-nav-catalog-list__scene {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.t-nav-catalog-list-block {
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: block;
}
.t-nav-catalog-list-block {
padding: 0px 10px;
/* display: inline-block;*/
margin: 0 0 10px;
width: 100%;
}
.t-nav-catalog-list-block__header {
color: #77e0c3;
display: block;
font-size: 18px;
padding: 5px !important;
transition: ease-in-out 0.1s;
}
.t-nav-catalog-list-block__list {
list-style: none;
padding: 0;
}
.t-nav-catalog-list-block__link {
color: #ffffff;
display: block;
font-size: 14px;
padding: 5px !important;
transition: ease-in-out 0.1s;
}Выод категорий
<div style="position: relative;">
<ul class="newcategory">
{hook name="catalog-blocks-category-category:list-item" title="{t}Доплнительные пункты меню, в меню каталога{/t}"}
{foreach $dirlist as $dir}
<li class="{if !empty($dir.child)} t-dropdown{/if}" {$dir.fields->getDebugAttributes()}>
{* Первый уровень *}
<a {$dir.fields->getDebugAttributes()} href="{$dir.fields->getUrl()}">{$dir.fields.name}</a>
{if !empty($dir.child)}
{* Второй уровень *}
<div class="t-dropdown-menu">
<div class="t-nav-catalog-list__inner">
<div class="t-nav-catalog-list__scene">
{foreach $dir.child as $subdir}
<div class="t-nav-catalog-list-block">
<a {$subdir.fields->getDebugAttributes()} href="{$subdir.fields->getUrl()}" class="t-nav-catalog-list-block__header">{$subdir.fields.name}</a>
{* Третий уровень *}
{if !empty($subdir.child)}
<ul class="t-nav-catalog-list-block__list">
{foreach $subdir.child as $subdir2}
<li><a {$subdir2.fields->getDebugAttributes()} href="{$subdir2.fields->getUrl()}" class="t-nav-catalog-list-block__link">{$subdir2.fields.name}</a></li>
{/foreach}
</ul>
{/if}
</div>
{/foreach}
</div>
</div>
</div>
{/if}
</li>
{/foreach}
{/hook}
</ul>
</div>навешиваем класс
<script>
$('.t-dropdown').hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
)
</script>
