Многослойное выпадающее меню Twitter Bootstrap

Question

Мой код ниже. Это получается горизонтальная строка меню. Я хочу поместить это в нижний колонтитул; следовательно, должен выскочить.

HTML

<ul id="nav"> 
    <li>
        <a href="#">Chicago Bears</a> 
        <ul> 
            <li><a href="">Running Backs</a></li> 
            <li><a href="">Quarterbacks</a></li> 
            <li><a href="">Lineman</a></li> 
        </ul> 
    </li> 
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
}

ul li {
    position: top;
}

li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

li:hover ul {
    display: block;
}

Answer 1

Ответил на другой вопрос (который был удален) о той же предпосылке, меню, которое выскакивает «вверх», а не вниз, вот мои результаты для будущих пользователей:

Создан мой собственный класс .dropup-menu, чтобы невозиться с функциональностью по умолчанию выпадающего меню.В этом классе я поместил раскрывающееся меню над текущим элементом меню вместе со стрелкой, поэтому теперь, когда щелкнуло меню с доступным раскрывающимся списком, меню открывается вверх.

CSS

.dropup-menu {
    bottom: 100%;
    top: auto !important;
}

/* position the arrow downwards, pointing to the menu */

.navbar .dropup-menu:before {
    border-bottom: none;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0, 0, 0, 0.2);
    left: 7px;
    top: 100%;
}

.navbar .dropup-menu:after {
    border-bottom: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    left: 10px;
    top: 100%;
    left: 6px;
}

/* point the caret up*/

.up {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #000000;
    border-top: none;
}

Разметка

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

<ul class="dropdown-menu dropup-menu">
    <li>...</li>
</ul>

Демо: http://jsfiddle.net/andresilich/NMs4Z/2/

Answer 2

Я полагаю, что ОП просто просит о способе размещения выпадающего списка над строкой меню.
Начиная с 2.3.1, фактической версии Bootstrap, она уже интегрирована и представлена ​​вПримеры!

Вам просто нужно добавить класс dropup к родительскому элементу вашего выпадающего элемента

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Проверьте документы здесь , Выпадающие меню последняя часть Кнопка раскрывающегося списка .