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

我想OP只是想要一种方法将下拉列表选项放在菜单栏上面。
从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>

Check the docs here， Dropup Menus 按钮下拉列表部分的最后一部分。

多层下拉菜单Twitter Bootstrap

2 个答案: