title: Navbar second submenu not positioned correctly
body: <p>This question is based on a thread here on SO <a href="https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click">Here</a> This works all fine, unless the 2nd level item is not on top. In the example given, the item with the 2nd level menu is the first item. if you move the item down one or two spots, the 2nd level opens at the top.</p>
  
  <p>The CSS, looks good, I also thought maybe it had to do with the Bootstrap version in the one demo link in the thread</p>
  
  <pre><code>    .sidebar-nav {
      padding: 9px 0;
  }
  
  .dropdown-menu .sub-menu {
      left: 100%;
      position: absolute;
      top: 0;
      visibility: hidden;
      margin-top: -1px;
  }
  
  .dropdown-menu li:hover .sub-menu {
      visibility: visible;
  }
  
  .dropdown:hover .dropdown-menu {
      display: block;
  }
  
  .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
      margin-top: 0;
  }
  
  .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;
  }
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/2Smgv/3100/" rel="nofollow noreferrer">Fiddle</a>).</p>
  
  <p>So to eliminate that issue, I moved it around in the sandbox, from Fiddle, and got the same issue, so it seems it is not with my code, or Bootstrap version. I am not attached to doing it this way, I am fully open to using something different, as long as I can have 2nd level menu, and open on hover on full size screens.</p>
  
  <p>Thanks,</p>
  
  <p>Dave</p>