Bootstrap Drowdown multi level

by rajeshpillai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<ul class="nav nav-pills">
      <li class="dropdown active">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#buttonGroups">Button groups</a></li>
          <li class="active">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Button dropdowns <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#buttonGroups">Button 1</a></li>
                <li class="active"><a href="#buttonDropdowns">Button 2</a></li>
              </ul>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Navigation <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class=""><a href="#navs">Nav, tabs, pills</a></li>
          <li><a href="#navbar">Navbar</a></li>
          <li><a href="#breadcrumbs">Breadcrumbs</a></li>
          <li><a href="#pagination">Pagination</a></li>
        </ul>
      </li>
      <li><a href="#labels">Labels</a></li>
      <li><a href="#badges">Badges</a></li>
      <li><a href="#typography">Typography</a></li>
      <li><a href="#thumbnails">Thumbnails</a></li>
      <li><a href="#alerts">Alerts</a></li>
      <li><a href="#progress">Progress bars</a></li>
      <li><a href="#misc">Miscellaneous</a></li>
    </ul>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
  

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .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: -30px;
}