Bootstrap nested nav
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul id="drilldown" class="nav nav-pills nav-stacked">
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#" data-toggle="collapse" data-target="#drilldown-1">menu item 3</a>
<div style="padding-left:0px;">
<ul id="drilldown-1" class="nav nav-pills nav-stacked collapse">
<li><a href="#">menu item 3-1</a></li>
<li><a href="#">menu item 3-2</a></li>
<li><a href="#">menu item 3-3</a></li>
</ul>
</div>
</li>
<li><a href="#" data-toggle="collapse" data-target="#drilldown-2">menu item 4</a>
<div style="padding-left:0px;">
<ul id="drilldown-2" class="nav nav-pills nav-stacked collapse">
<li><a href="#">menu item 4-1</a></li>
<li><a href="#">menu item 4-2</a></li>
<li><a href="#">menu item 4-3</a></li>
</ul>
</div>'
</li>
<li><a href="#">menu item 5</a></li>
</ul>
</div>
</div>
</div>
CSS
.nav li.dropdown ul.dropdown-menu li.nav-list:hover {
background: #08c;
color: #fff;
cursor: pointer;
}
.nav li.dropdown ul.dropdown-menu .nav-list {
font-size: 13px;
color: #333;
float: none;
line-height: 21px;
}
.nav li.dropdown ul.dropdown-menu li:hover ul {
display:block;
position:absolute;
left:100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav li.dropdown ul.dropdown-menu ul {
display: none;
float:right;
position: relative;
top: auto;
margin-top: -27px;
}
.nav li.dropdown ul.dropdown-menu .nav-list .caret {
border-bottom-color: #999;
border-top-color: #999;
float: right;
}
.nav li.dropdown ul.dropdown-menu .nav-list:hover .caret {
margin-left: 6px;
margin-top: 5px;
margin-right: 1px;
border-right: 0;
border-left: 4px solid #fff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.nav li.dropdown ul .nav-list .dropdown-menu:after {
top: 8px;
left: -12px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #fff;
}
.nav li.dropdown ul .nav-list .dropdown-menu:before {
left: -7px;
border-left: 0;
top: 7px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid rgba(0,0,0,0.05);
}