Twitter Bootstrap - 具有第二級但不是下拉菜單的Navbar

Question

我想用第二級創建頂級導航欄，但不是作爲下拉菜單。它應該在第一行之後作爲第二行。示例（*表示是活動的）：

nav1 | nav2 * | nav3

nav2a | nav2b

應該是這樣的：

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