Выпадающее меню Bootstrap

Выпадающее меню — один из компонентов Bootstrap, использующий для своей работы JavaScript. В контейнер с классом .dropdown (или position:relative) помещается кнопка, которую будут нажимать пользователи, для отображения выпадающей части (На картинке соответствует слову «Выпадающее»). После кнопки размещается Список с классом .dropdown-menu и доп. атрибутами aria-* при необходимости.

Выпадающее меню

Например,

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Выпадающее
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Первый</a></li>
    <li><a href="#">Второй</a></li>
    <li><a href="#">Третий пункт</a></li>
  </ul>
</div>

Если нужно, чтобы меню выкидывало пункты вверх, надо заменить класс .dropdown на .dropup.

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li role="separator" class="divider"></li>
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Неактивные пункты выпадающего меню помечаются классом .disabled. Примечание: класс добавляется элементу li.