Nested SideBar with or without Twitter Bootstrap

Question

Is it possible to create Nested Left Sidebar with twitter bootstrap? I checked their tutorials but couldn't find it. I want to make a side bar with some listings and each listing contains nested lists which by default are hidden and when the user hover mouse on the list the hidden options should become visible.

<div class="span2">  
    <div class="well sidebar-nav">  
        <ul class="nav nav-list">  
            <li class="nav-header">Categories</li>  
            <li class="divider"></li>
            <li><a href="#">Books</a> 
                              <ul>
                                  <li><a href="#">Science Books</a></li>
                                  <li><a href="#">Computer Books</a></li>
                                  <li><a href="#">History Books</a></li>
                               </ul>
                            </li>  
            <li><a href="#">Electronics</a></li> 
                                <ul>
                                  <li><a href="#">TV</a></li>
                                  <li><a href="#">Freezer</a></li>
                                  <li><a href="#">Radio</a></li>
                                </ul> 
            <li><a href="#">Computer</a></li>
        </ul>  
    </div> 
</div>

Is it possible to do it with twitter bootstarp ? If not any other solution ?

Thanks

Answer 1

Collapse You can mix collapse plugin with well+nav classes. Exemple

Answer 2

yes you can do this see the link given below

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
            <a class="brand" href="#">Brand X</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li><a href="#">Regular Link</a></li>                    
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Basic List <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Lorem</a></li>
                            <li><a href="#">Ipsum</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nested Lists<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="nav-header">Top Stuff</li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                    <li><a href="#">Bat</a></li>                                
                                </ul>        
                            </li>
                            <li class="nav nav-list">Nested List<b class="caret"></b>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Foo</a></li>
                                    <li><a href="#">Bar</a></li>    
                                </ul>    
                            </li>
                            <li><a href="#">Sit</a></li>
                            <li><a href="#">Amet</a></li>
                            <li><a href="#">Dolor</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Other Stuff</li>
                            <li><a href="#">Foo</a></li>
                            <li><a href="#">Bar</a></li>
                            <li><a href="#">Bat</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

.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);
}

http://jsfiddle.net/scottloway/S9yTU/