Twitter Bootstrap - Navbar with second level, but not a dropdown - css

Question

I want to make a top navbar with a second level, but not as a dropdown menu. It should apear as a second row under the first one. Example (* means the is the active one):
nav1 | nav2* | nav3
nav2a | nav2b
Should look like this:
<div class="navbar" id="topnavi">
<div class="navbar-inner">
<ul class="nav">
<li>
nav1
<ul class="secondlevel">
<li>nav1a</li>
<li>nav1b</li>
<li>nav1c</li>
</ul>
</li>
<li>
nav2
<ul class="secondlevel">
<li>nav2a</li>
<li>nav2b</li>
</ul>
</li>
<li>
nav3
</li>
</ul>
</div>
</div>
Any ideas?

Answer 1

I used the dropdown class and over-wrote some of the styles so that the nested dropdown items appear as a secondary nav below the primary items. This is the general direction from what I understand- hope it helps!
HTML:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.nav > li {
display: inline-block;
}
.dropdown-menu{
display: inline;
position: relative;
}
.dropdown-menu > li{
display:inline-block;
}