title: sideways dropdown menu on hover using bootstrap 3 or css?
body: <p>I am looking to have side-ways dropdown menu that could be clicked. Upon hovering over the list items, it that list items has any nested li items, it will show up.
  Here is my current code. you can paste it in <a href="http://www.bootply.com/" rel="nofollow noreferrer">http://www.bootply.com/</a> to see how it looks. It currently is very bad. it is displaying everything at the same time. and even one of the items is hidden behind another list item. 
  I tried to follow this <a href="https://stackoverflow.com/questions/15443306/hover-menu-in-right-side-of-fixed-div">post.</a> but I could not get it working. I am using bootstrap 3 in my HTML. so if there is a way to do it with bootstrap3 , that would be fine too.</p>
  
  <p>Here is my html with inline css at the end:</p>
  
  <pre><code>&lt;div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"&gt;
            &lt;div class="list-group"&gt;
  
  
                &lt;li id="settings" class="list-group-item"&gt;toyota highlander 
                &lt;ul id="test"&gt;
  
                  &lt;li&gt;&lt;a href="/search/57/atlanta/"&gt;atlanta&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/57/austin/"&gt;austin&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/57/boston/"&gt;boston&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/57/chicago/"&gt;chicago&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/57/seattle/"&gt;seattle&lt;/a&gt;&lt;/li&gt;
  
                &lt;/ul&gt;
              &lt;/li&gt;
  
  
  
  
              &lt;li&gt;&lt;a href="/search/56" class="list-group-item  "&gt;honda fit &lt;/a&gt;&lt;/li&gt;
  
  
  
                &lt;li id="settings" class="list-group-item  "&gt;ford explorer 
                &lt;ul id="test"&gt;
  
                  &lt;li&gt;&lt;a href="/search/54/raleigh/"&gt;raleigh&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/54/sacramento/"&gt;sacramento&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/54/sandiego/"&gt;sandiego&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="/search/54/seattle/"&gt;seattle&lt;/a&gt;&lt;/li&gt;
  
                &lt;/ul&gt;
              &lt;/li&gt;
  
  
  
            &lt;/div&gt;
          &lt;/div&gt;&lt;!--/span--&gt;
        &lt;/div&gt;&lt;!--/row--&gt;
  
  &lt;style&gt;
    li#settings {
                    position:absolute;
                    overflow: visible;
                  }
  
                  li#settings:hover &gt; ul {
                    cursor:pointer;
                    display:block;
  
                  }
                  ul#test {
                    display: none;
                    white-space: nowrap;
                    list-style: none;
                    position: absolute;
                    top:34px;
                  }
  
              &lt;/style&gt;
  </code></pre>
  
  <p>In <a href="http://getbootstrap.com/examples/offcanvas/" rel="nofollow noreferrer">this</a> bootstrap template, there are links on right side of page, as you hover over each link, I want to display li items with-in that link. if there are no li-items, the link itself will be clickable</p>
  
  <p>EDIT:</p>
  
  <p>latest trial here:</p>
  
  <pre><code>&lt;div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"&gt;
            &lt;div class="btn-group-vertical"&gt;
              &lt;div id="sidebar" class="sidebar-nav span3"&gt;
              &lt;ul class="nav nav-tabs nav-stacked"&gt;
                &lt;ul class="dropdown-menu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"&gt;  
  
  
                &lt;li class="dropdown-submenu  active "&gt; &lt;a tabindex="-1" href="#"&gt;toyota highlander &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="/search/57/atlanta/"&gt;atlanta&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/57/austin/"&gt;austin&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/57/boston/"&gt;boston&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/57/chicago/"&gt;chicago&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/57/seattle/"&gt;seattle&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
                 &lt;li class="nav-menu"&gt;&lt;a href="/search/56" class=" "&gt;honda fit &lt;/a&gt;&lt;/li&gt;
                &lt;li class="dropdown-submenu "&gt; &lt;a tabindex="-1" href="#"&gt;ford explorer &lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="/search/54/raleigh/"&gt;raleigh&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/54/sacramento/"&gt;sacramento&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/54/sandiego/"&gt;sandiego&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="/search/54/seattle/"&gt;seattle&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/ul&gt;
        &lt;/div&gt; 
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>