try this:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> <a href="#">Another action</a>
</li>
</ul>
</li>
<li> <a href="#">Link</a>
</li>
<li> <a href="#">Link</a>
</li>
<li> <a href="#">Link</a>
</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>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
Side Note...
I recommend adding the following css to your nav menus in bootstrap:
ul.nav a {
outline: none;
}
it keeps that ugly blue outline from showing up if you click on a main menu item to close it.