title: Bootstrap collapsible side menu items
body: <p>I am trying to make a bootstrap side menu that makes sub items collapsible. </p>
  
  <p>Similar to <a href="http://jsfiddle.net/">http://jsfiddle.net/</a>
  However I want link items in the submenus and not such a complicated structure. </p>
  
  <p>This is what I tried</p>
  
  <pre><code> &lt;div class="row"&gt;
        &lt;!-- Main component for a primary marketing message or call to action --&gt;
          &lt;div class="col-sm-3 col-md-2 sidebar"&gt;
             &lt;ul class="nav nav-sidebar"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;More&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About US&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Jobs&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
               &lt;li&gt;&lt;a href=""&gt;Nav item again&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;One more nav&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Another nav item&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
  
          &lt;/div&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate. </p>