Давайте сначала посмотрим, что мы имеем (демо). Как видно, у нас просто выпадающее меню, которое сейчас не выпадает. Ни стилей - ничего. А ниже код этого безобразия
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Dr. Winthrop</a></li>
<li><a href="#">Dr. Chase</a></li>
<li><a href="#">Dr. Sanders</a></li>
</ul>
</li>
<li class="active"><a href="#">Services</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul> Давайте видоизменим код и разберем его
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" data-toggle="dropdown">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dr. Winthrop</a></li>
<li><a href="#">Dr. Chase</a></li>
<li><a href="#">Dr. Sanders</a></li>
</ul>
</li>
<li class="active"><a href="#">Services</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul> - Первым делом обязательно задаем класс .dropdown у нашего тега <li>
- Тегу <a> добавим data-toggle="dropdown", это означает, что при клике будет открываться нашем меню
- <span class="caret"></span> - это просто стрелочка
- И последнее, это добавим класс .dropdown-menu нашему новоме меню.
Вот и все, теперь у нас симпотичное выпадающее меню.
Хочу заметить, что выпадающее меню на Bootstrap открывается при клике, а не при наведении. Это связано с мобильными устройствами, т.к. там открывать меню можно только кликом по нему.