Twitter Bootstrap 2顶级导航下拉菜单覆盖subnav酒吧

Question

我创建一个Twitter的Bootstrap主导航和副导航与主导航下拉菜单。问题是，我永远不能让下拉菜单显示在子导航上方。下面是HTML：

<div class="mainnav navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
         Settings 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a>test 1</a></li> 
         <li><a>test 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div class="subnav navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav"> 
       <li><a>foo</a></li> 
       <li><a>bar</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

CSS：

.subnav { 
    top: 40px; 
} 

.mainnav .dropdown-menu { 
    // how can I show this menu above the subnav??? 
} 

Answer 1

没关系，想通了这一点自己。

.subnav { 
    top: 40px; 
    z-index: 1020; // make z-index smaller than .mainnav 
} 

的jsfiddle链接：

http://jsfiddle.net/j2pCX/1/

Answer 2

提供的z-index一试：

.subnav { 
    position: absolute; 
    top: 40px; 
    z-index: 10; 

} 

.mainnav .dropdown-menu { 
    position: absolute; 
    z-index: 20; 
}