Twitter Bootstrap 3 top nav dropdown covered by subnav bar
- by Aaron Qian
I'm creating a Twitter Bootstrap main nav and sub nav with a drop down menu on the main nav. The problem is that I can never get the drop down menu to be shown above the sub nav. Here is the 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???
}
