Reputation: 4505
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???
}
Upvotes: 2
Views: 6424
Reputation: 1120
Give z-index a try:
.subnav {
position: absolute;
top: 40px;
z-index: 10;
}
.mainnav .dropdown-menu {
position: absolute;
z-index: 20;
}
Upvotes: 1
Reputation: 4505
Never mind, figured this out myself.
.subnav {
top: 40px;
z-index: 1020; // make z-index smaller than .mainnav
}
JsFiddle Link:
Upvotes: 2