title: Bootstrap Multi Level Menu
body: <p>trying to do a couple of things here but I cant seem to find how to make the following happen.</p>
  
  <ol>
  <li>Make navigation menu drop down when hovered</li>
  <li>Make sub menu appear on the right side of the parent item.</li>
  </ol>
  
  <p>It seems as though all my menu items appear at the top like they are in a fixed position at the top of the navigation menu.</p>
  
  <p>Im currently using Bootstrap 2.3.2</p>
  
  <p>ANy ideas greatly appreciated, as I cant seem to find a snippet or real working example anywhere online</p>
  
  <pre><code> &lt;div class="nav-collapse collapse in hover"&gt;
          &lt;ul class="nav"&gt;         
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="badge badge-success pull-left"&gt;100&lt;/span&gt;&amp;nbsp;Users  &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;          
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;View Existing Users&lt;/a&gt;
                  &lt;ul class="dropdown-menu sub-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New User&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Roles &amp; Groups&lt;/a&gt;
                  &lt;ul class="dropdown-menu sub-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Role / Group&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;              
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="typography.html"&gt;Statistics&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;!--- end user management ---&gt;
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Content &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Site Navigation&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Navigation Item&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Arrange Navigation Order&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Pages&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;SEO Utilities&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Gallery&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;SEO Utilities&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Articles&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Article&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;SEO Utilities&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;     
                  &lt;li&gt;&lt;a href="layout.html"&gt;Code Snippets&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href=""&gt;Add New Snippet&lt;/a&gt;&lt;/li&gt;                 
                  &lt;/ul&gt;
                &lt;/li&gt;
  
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Assets &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;File Manager&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;File Import&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="badge badge-success pull-left"&gt;100&lt;/span&gt;&amp;nbsp;Shop &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Departments&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Discounts&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Orders&lt;span class="badge badge-success pull-right"&gt;100&lt;/span&gt;&amp;nbsp;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Send to a Friend&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Data Import&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Data Export&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
  
  
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Marketing &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Facebook Insights&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Mail Chimp Login&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="typography.html"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="ui.html"&gt;Search Engine Utilities&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
  
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Settings &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Website Settings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Template Manager&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;CSS Editor&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
  
  
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Statistics &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="index.html"&gt;Website Statistics&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="layout.html"&gt;Google Analytics&lt;/a&gt;&lt;/li&gt;             
              &lt;/ul&gt;
            &lt;/li&gt;
  
  
          &lt;/ul&gt;
          &lt;div class="user-info pull-right"&gt;
            &lt;div class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;img src="img/styler/dummy/daenerys.jpg"&gt; Me &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="gallery.html"&gt;Your Profile &lt;span class="badge badge-important pull-right"&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;             
                &lt;li&gt;&lt;a href="stream.html"&gt;Account Settings&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="stream.html"&gt;Messages&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;form class="form-search pull-right"&gt;
            &lt;input type="text" class="input-medium search-query" placeholder="Search anything here"&gt;
            &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;!--- end navigation menu ---&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;style&gt;
  /* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
  
  .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      visibility: hidden;
      margin-top: -1px;
  }
  
  .dropdown-menu li:hover .sub-menu {
      visibility: visible;
      display: block;
      position:absolute;
      left
  }
  
  .navbar .sub-menu:before {
      border-bottom: 7px solid transparent;
      border-left: none;
      border-right: 7px solid rgba(0, 0, 0, 0.2);
      border-top: 7px solid transparent;
      left: -7px;
      top: 10px;
  }
  .navbar .sub-menu:after {
      border-top: 6px solid transparent;
      border-left: none;
      border-right: 6px solid #fff;
      border-bottom: 6px solid transparent;
      left: 10px;
      top: 11px;
      left: -6px;
  }
  
          &lt;/style&gt;
  </code></pre>