sideways dropdown menu on hover using bootstrap 3 or css? - html

Question

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 http://www.bootply.com/ 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 post. 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.
Here is my html with inline css at the end:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<li id="settings" class="list-group-item">toyota highlander
<ul id="test">
<li>atlanta</li>
<li>austin</li>
<li>boston</li>
<li>chicago</li>
<li>seattle</li>
</ul>
</li>
<li>honda fit </li>
<li id="settings" class="list-group-item ">ford explorer
<ul id="test">
<li>raleigh</li>
<li>sacramento</li>
<li>sandiego</li>
<li>seattle</li>
</ul>
</li>
</div>
</div><!--/span-->
</div><!--/row-->
<style>
li#settings {
position:absolute;
overflow: visible;
}
li#settings:hover > ul {
cursor:pointer;
display:block;
}
ul#test {
display: none;
white-space: nowrap;
list-style: none;
position: absolute;
top:34px;
}
</style>
In this 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
EDIT:
latest trial here:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="btn-group-vertical">
<div id="sidebar" class="sidebar-nav span3">
<ul class="nav nav-tabs nav-stacked">
<ul class="dropdown-menu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu active "> <a tabindex="-1" href="#">toyota highlander </a>
<ul class="dropdown-menu">
<li>atlanta</li>
<li>austin</li>
<li>boston</li>
<li>chicago</li>
<li>seattle</li>
</ul>
</li>
<li class="nav-menu">honda fit </li>
<li class="dropdown-submenu "> <a tabindex="-1" href="#">ford explorer </a>
<ul class="dropdown-menu">
<li>raleigh</li>
<li>sacramento</li>
<li>sandiego</li>
<li>seattle</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
</div>

Answer 1

UPDATE: CHECK this FIDDLE for my updated answer. I've used Bootstrap 3 this time.
note: I was searching how to move the arrow to the left like the sub-menu but I can't find the answer. I hope this still helps.
I've research and found out the dropdown-submenu is not supported on Bootstrap 3 anymore. Please see the accepted answer. It might help you.
Is THIS what you are trying to do?
Dropdown submenu CSS for Bootstrap 3:
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu{float:none;}.dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.sidebar{float:right;margin-right:20px;}

Answer 2

Why don't you use the Button Groups? The vertical variation looks similar to what you are doing.
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>