Twitter Bootstrap - 二级导航栏，但不是下拉菜单答案

【问题标题】：Twitter Bootstrap - Navbar with second level, but not a dropdownTwitter Bootstrap - 二级导航栏，但不是下拉菜单
【发布时间】：2014-06-27 04:40:37
【问题描述】：

我想制作一个二级导航栏，但不是作为下拉菜单。它应该显示为第一行下方的第二行。示例（* 表示是活动的）：

导航1 |导航2* |导航3

导航2a |导航2b

应该是这样的：

<div class="navbar" id="topnavi">
    <div class="navbar-inner">
        <ul class="nav">
            <li>
                <a href="#">nav1</a>
                <ul class="secondlevel">
                    <li><a href="#">nav1a</a></li>
                    <li><a href="#">nav1b</a></li>
                    <li><a href="#">nav1c</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav2</a>
                <ul class="secondlevel">
                    <li><a href="#">nav2a</a></li>
                    <li><a href="#">nav2b</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav3</a>
            </li>
        </ul>
    </div>
</div>

有什么想法吗？

【问题讨论】：

也许给二级菜单一个类并将它的 css 覆盖为 float:left 和 vetical align:top ？需要确保选择器的目标是特定的以使其工作。
我只是将两个 .navbar 堆叠在一起，不要将它们嵌套在一起

标签： css twitter-bootstrap navbar

【解决方案1】：

我使用了下拉类并重写了一些样式，以便嵌套的下拉项显示为主要项下方的辅助导航。这是我理解的大方向-希望对您有所帮助！

HTML：

    <div class="navbar">
      <div class="navbar-inner">
          <ul class="nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
      </div>
    </div>

CSS：

    .nav > li {
         display: inline-block;
     }
    .dropdown-menu{
         display: inline;
         position: relative;
     }
     .dropdown-menu > li{
         display:inline-block;
     }

【讨论】：