Задать вопрос
vanesxl
@vanesxl

Почему не работает выпадающее меню?

Здравствуйте,
делаю многоуровневое вертикальное меню на сайте. В нете нашел много примеров, вроде все просто. Но проблема в том что нет выпадающих элементов, не могу понять в чем проблема. Вот код самого меню:
<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;
}

Первый уровень отображается нормально, но вот элементы не выпадают, их как будто вообще нет.
  • Вопрос задан
  • 722 просмотра
Подписаться 1 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
ты взял меню бутсрапа. а ты сам bootstrap то поставил?
Ответ написан
railsdev
@railsdev
Ruby/Rails Developer
У вас в обоих выпадающих списков одинаковые классы class="dropdown-toggle" data-toggle="dropdown". Погуглите не много в эту сторону. Если не ошибаюсь, то они должны быть разные. + в js файлике эти классы надо заинитить
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
11 дек. 2024, в 22:30
250000 руб./за проект
11 дек. 2024, в 22:15
10000 руб./за проект
11 дек. 2024, в 22:10
3000 руб./за проект