css - Twitter Bootstrap - 具有二级导航栏，但不是下拉菜单

Question

我想制作一个二级导航栏，但不是下拉菜单。它应该出现在第一行下面的第二行。示例(* 表示是事件的):

导航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>

有什么想法吗？

Answer 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;
     }