Здравствуйте,
делаю многоуровневое вертикальное меню на сайте. В нете нашел много примеров, вроде все просто. Но проблема в том что нет выпадающих элементов, не могу понять в чем проблема. Вот код самого меню:
<div class="vertical-menu-content is-home">
<ul class="nav-pills nav-stacked nav">
<li class="dropdown">
<a href="/shop/kitchen/" class="dropdown-toggle" data-toggle="dropdown">Кухни</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/kitchen/turnkey-solutions/">Готовые решения</a>
</li>
<li>
<a href="/shop/kitchen/modular-kitchen/">Модульные кухни</a>
</li>
<li>
<a href="/shop/kitchen/wall-panels/">Стеновые панели</a>
</li>
<li>
<a href="/shop/kitchen/tables/">Столы</a>
</li>
<li>
<a href="/shop/kitchen/chairs/">Стулья</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/shop/living-rooms/" class="dropdown-toggle" data-toggle="dropdown">Гостиные</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/living-rooms/turnkey-solutions/">Готовые решения</a>
</li>
<li class="dropdown">
<a href="/shop/living-rooms/modular-living-rooms/" class="dropdown-toggle" data-toggle="dropdown">Модульные гостиные</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/living-rooms/modular-living-rooms/modular-living-room-mar-15/">Гостиная модульная "Марта-15"</a>
</li>
<li>
<a href="/shop/living-rooms/modular-living-rooms/lounge-milan/">Гостиная модульная "Милан" </a>
</li>
<li>
<a href="/shop/living-rooms/modular-living-rooms/modular-living-room-march-19/">Гостиная модульная "Марта-19"</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/shop/bedrooms/" class="dropdown-toggle" data-toggle="dropdown">Спальни</a>
<ul class="dropdown-menu">
<li class="dropdown">
<a href="/shop/bedrooms/modular-bedroom-sets/" class="dropdown-toggle" data-toggle="dropdown">Модульные спальные гарнитуры</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/bedrooms/modular-bedroom-sets/bedroom-set-ronda/">Спальный гарнитур "Ронда"</a>
</li>
<li>
<a href="/shop/bedrooms/modular-bedroom-sets/bedroom-set-venice/">Спальный гарнитур "Венеция"</a>
</li>
<li>
<a href="/shop/bedrooms/modular-bedroom-sets/bedroom-set-victoria/">Спальный гарнитур "Виктория"</a>
</li>
</ul>
</li>
<li>
<a href="/shop/bedrooms/bed/">Кровати</a>
</li>
<li>
<a href="/shop/bedrooms/dressers/">Комоды</a>
</li>
<li>
<a href="/shop/bedrooms/cabinets/">Шкафы</a>
</li>
<li>
<a href="/shop/bedrooms/closets/">Шкафы-купе</a>
</li>
<li>
<a href="/shop/bedrooms/dressing-tables/">Туалетные столы</a>
</li>
<li>
<a href="/shop/bedrooms/bedside-tables/">Прикроватные тумбы</a>
</li>
<li>
<a href="/shop/bedrooms/mirror/">Зеркала</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/shop/baby/" class="dropdown-toggle" data-toggle="dropdown">Детские</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/baby/modular-baby/">Модульные детские</a>
</li>
<li>
<a href="/shop/baby/turnkey-solutions/">Готовые решения</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="/shop/hallways/" class="dropdown-toggle" data-toggle="dropdown">Прихожие</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/hallways/turnkey-solutions/">Готовые решения</a>
</li>
<li class="dropdown">
<a href="/shop/hallways/modular-hallways/" class="dropdown-toggle" data-toggle="dropdown">Модульные прихожие</a>
<ul class="dropdown-menu">
<li>
<a href="/shop/hallways/modular-hallways/hallway-modular-vega/">Прихожая модульная "Вега"</a>
</li>
<li>
<a href="/shop/hallways/modular-hallways/hallway-modular-eve-disavi/">Прихожая модульная "Ева" (Disavi)</a>
</li>
<li>
<a href="/shop/hallways/modular-hallways/hallway-modular-mashenka/">Прихожая модульная "Машенька" (Disavi)</a>
</li>
</ul>
</li>
<li>
<a href="/shop/hallways/cabinets/">Шкафы</a>
</li>
<li>
<a href="/shop/hallways/closets/">Шкафы-купе</a>
</li>
<li>
<a href="/shop/hallways/hanger/">Вешалки</a>
</li>
</ul>
</li>
<li>
<a href="/shop/sofas/">Диваны</a>
</li>
<li>
<a href="/shop/door/">Двери</a>
</li>
<li>
<a href="/shop/closets/">Шкафы-купе</a>
</li>
</ul>
</div >
В css правили не много, вот собственно он сам:
/*Эта часть была с макетом */
.home .box-vertical-megamenus .vertical-menu-content {
display: block;
}
.box-vertical-megamenus .vertical-menu-content {
border-top: 3px solid #ff3366;
background: #fff;
display: none;
padding-bottom: 15px;
}
/* эта часть есть в файле bootstrap-mini.css */
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-stacked>li {
float: none;
}
.nav-pills>li {
float: left;
}
.nav>li {
position: relative;
display: block;
}
.dropdown, .dropup {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ol ol, ol ul, ul ol, ul ul {
margin-bottom: 0;
}
Первый уровень отображается нормально, но вот элементы не выпадают, их как будто вообще нет.
Средний
