Comment personnaliser bootstrap barre latérale/sidenav?

J'ai besoin de faire usage de Twitter Bootstrap dans la barre latérale pour la création d'un menu dans mon application web.(Surligné en rouge).

Pour créer un menu comme indiqué ci-dessous.

Le premier élément est une liste déroulante comme illustré à la mage. Et à Côté des éléments dans le menu devrait venir ci-dessous.Mais c'est ce que j'obtiens quand j'utilise le css.

Élément de Menu de la superposition de l'autre.

Ici est la le code de démarrage:

<div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix">
      <li class="active"><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
      <li class=""><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
      <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>
      <li><a href="#navs"><i class="icon-chevron-right"></i> Navs</a></li>
      <li><a href="#navbar"><i class="icon-chevron-right"></i> Navbar</a></li>
      <li><a href="#breadcrumbs"><i class="icon-chevron-right"></i> Breadcrumbs</a></li>
      <li><a href="#pagination"><i class="icon-chevron-right"></i> Pagination</a></li>
      <li><a href="#labels-badges"><i class="icon-chevron-right"></i> Labels and badges</a></li>
      <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
      <li><a href="#thumbnails"><i class="icon-chevron-right"></i> Thumbnails</a></li>
      <li><a href="#alerts"><i class="icon-chevron-right"></i> Alerts</a></li>
      <li><a href="#progress"><i class="icon-chevron-right"></i> Progress bars</a></li>
      <li><a href="#media"><i class="icon-chevron-right"></i> Media object</a></li>
      <li><a href="#misc"><i class="icon-chevron-right"></i> Misc</a></li>
    </ul>
  </div>

Ici est mon code:

 <div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav affix">
        <li> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                <i class="icon-user"></i>dany
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a id="logout" href="#">Sign Out</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="span3 bs-docs-sidebar">
    <ul class="nav nav-list bs-docs-sidenav `affix`">
        <li><a href="#approval" id="approval"></i>Approval Requests</a></li>
        <li><a href="#setting" id="setting"></i>Settings</a></li>
    </ul>
</div>

La classe css de bootstrap réglage de la position est bs-docs-sidenav et affix je pense.
Le css de docs.css de twitter bootstrap est cette

Quelqu'un s'il vous plaît aider à résoudre ce problème aussi vite que possible.

OriginalL'auteur dany | 2013-01-04