côté menu déroulant sur le vol stationnaire à l'aide de bootstrap 3 ou css?

Je suis à la recherche de côte-des moyens menu déroulant qui pourrait être cliqué. Sur le curseur sur les éléments de la liste, que les éléments de la liste a toutes les li éléments, il s'affichera.
Voici mon code actuel. vous pouvez la coller dans http://www.bootply.com/ pour voir à quoi il ressemble. Actuellement, il est très mauvais. c'est l'affichage de tout en même temps. et même l'un des éléments est caché derrière un autre élément de la liste.
J'ai essayé de suivre ce post. mais je ne pouvais pas le faire fonctionner. Je suis en utilisant bootstrap 3 dans mon code HTML. donc, si il ya un moyen de le faire avec bootstrap3 , qui serait bien aussi.

Voici mon html avec du css à la fin:

<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><a href="/search/57/atlanta/">atlanta</a></li>

                <li><a href="/search/57/austin/">austin</a></li>

                <li><a href="/search/57/boston/">boston</a></li>

                <li><a href="/search/57/chicago/">chicago</a></li>

                <li><a href="/search/57/seattle/">seattle</a></li>

              </ul>
            </li>




            <li><a href="/search/56" class="list-group-item  ">honda fit </a></li>



              <li id="settings" class="list-group-item  ">ford explorer 
              <ul id="test">

                <li><a href="/search/54/raleigh/">raleigh</a></li>

                <li><a href="/search/54/sacramento/">sacramento</a></li>

                <li><a href="/search/54/sandiego/">sandiego</a></li>

                <li><a href="/search/54/seattle/">seattle</a></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>

Dans cette bootstrap modèle, il y a des liens sur le côté droit de la page, que vous placez sur chaque lien, je veux afficher li éléments dans ce lien. si il n'y a pas de li-éléments, le lien lui-même sera cliquable

EDIT:

dernier essai ici:

<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><a href="/search/57/atlanta/">atlanta</a></li>
                <li><a href="/search/57/austin/">austin</a></li>
                <li><a href="/search/57/boston/">boston</a></li>
                <li><a href="/search/57/chicago/">chicago</a></li>
                <li><a href="/search/57/seattle/">seattle</a></li>
        </ul>
      </li>
               <li class="nav-menu"><a href="/search/56" class=" ">honda fit </a></li>
              <li class="dropdown-submenu "> <a tabindex="-1" href="#">ford explorer </a>
        <ul class="dropdown-menu">
                <li><a href="/search/54/raleigh/">raleigh</a></li>
                <li><a href="/search/54/sacramento/">sacramento</a></li>
                <li><a href="/search/54/sandiego/">sandiego</a></li>
                <li><a href="/search/54/seattle/">seattle</a></li>
        </ul>
      </li>
          </ul>
        </ul>
      </div> 
          </div>
        </div>