Редактирование горизонтального меню шаблона "HitechShop-2", opencart-2

[portxp]

Всем доброго дня, нужна помощь по редактированию горизонтального меню в opencart-2 шаблона  "HitechShop-2", сейчас в подкатегориях меню отображаются все подкатегории, а нужно переделать чтобы из основного меню выпадали катеории и далее при при наведении открывались остальные подменю, сейчас меню выглядит так

  

а нужно переделать так, наводишь на основное меню "Видеонаблюдение, далее открывались подкатегрии, Видеорегистраторы, Видеокамеры и далее, при наведении на Видеорегистраторы открывались далее меню  которые привязаны к  этой категории

 

Подскажите как это лучше сделать, ничего не получается.....

[mazein]

Легко, с помощью css.

[portxp]

Ну у меня пока не получилось, походу руки не из...., вот скрипт css, помоги сделать, заплачу.

/* menu */

#menu {

width: 100%;

text-align:center;

font-family: 'TeXGyreHerosCn';

background-color: #229ac8;

background-image: linear-gradient(to bottom, #29AE0E, #29AE0E);

background-repeat: repeat-x;

border-color: #2AB30E #2AB30E #2AB30E;

min-height: 40px;

clear: both;

}

#menu .nav > li {

 

}

#menu .nav > li > a {

color: #fff;

font-size: 14px;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

padding: 10px 15px 10px 15px;

min-height: 15px;

background-color: transparent;

}

#menu .nav > li > a:hover, #menu .nav > li.open > a {

background-color: rgba(0, 0, 0, 0.1);

 

}

#menu .dropdown-inner {

display: table;

}

#menu .dropdown-inner ul.list-unstyled {

list-style: outside none none;

    margin: 0 0 0 10px;

    padding: 0;

}

#menu .dropdown-inner a {

min-width: 160px;

padding: 3px 15px;

clear: both;

line-height: 15px;

color: #333333;

font-size: 12px;

}

#menu .see-all {

display: block;

margin-top: 0.5em;

border-top: 1px solid #DDD;

padding: 3px 20px;

-webkit-border-radius: 0 0 4px 4px;

-moz-border-radius: 0 0 4px 4px;

border-radius: 0 0 3px 3px;

font-size: 12px;

}

#menu #category {

float: left;

padding-left: 15px;

font-size: 16px;

font-weight: 700;

line-height: 40px;

color: #fff;

text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

}

#menu .btn-navbar {

color: #fff;

    float: right;

    font-size: 22px;

    font-stretch: expanded;

    margin: 0 0 1px;

    padding: 4px 28px;

}

#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {

 

}

@media (min-width: 768px) {

#menu .dropdown:hover .dropdown-menu {

display: block;

 

 

}

}

@media (max-width: 767px) {

#menu {

border-radius: 4px;

}

#menu div.dropdown-inner > ul.list-unstyled {

display: block;

}

#menu div.dropdown-menu {

margin-left: 0 !important;

padding-bottom: 10px;

background-color: rgba(0, 0, 0, 0.1);

}

#menu .dropdown-inner {

display: block;

}

#menu .dropdown-inner a {

width: 100%;

color: #fff;

}

#menu .dropdown-menu a:hover,

#menu .dropdown-menu ul li a:hover {

background: rgba(0, 0, 0, 0.1);

}

#menu .see-all {

margin-top: 0;

border: none;

border-radius: 0;

color: #fff;

}

}