Bootstrap 3 :How to display sub-Menü der Seite, navigation bar, unten in jedem Menü?

Ich versuche seitlichen Navigationsleiste mit Bootstrap 3. Jetzt sub-Menüs Anzeige rechts von jedem Menü. Ich möchte, um es anzuzeigen unten übergeordneten Menü.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">


      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
        </ul>
      </li>


      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options2</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Second level</a></li>
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li><a href="#">Second level</a></li>
          <li><a href="#">Second level</a></li>
        </ul>
      </li>
    </ul>

Hier ist die Demo.

Bearbeiten:
Ich versuche, es zu tun mit Zusammenbruch jsfiddle.net/mridulpv/Wrh8x/5 . Aber immer noch einige Probleme. Ich will zu verstecken Zusammenbruch Element ab, und entfernen Sie horizondal line etc.

Sie möchten die Anzeige jedes Untermenü in der 1. Ebene?
Geben left: 0 und top:30px (value depending on the height) zu .dropdown-submenu>.dropdown-menu. Check this demo. Hoffe, das ist, was Sie wollen.
Dann müssen Sie position:relative auf das dropdown-Menü, wie dieser
Sie können entfernen Sie in der Klasse zu verstecken reduziert Elemente
jsfiddle

InformationsquelleAutor mridul | 2013-12-18

  1. 3

    Diesen Effekt erreichen Sie, indem Sie nicht die Beseitigung der sub-Menüs aus dem Belegfluss. Das bedeutet, alles wird nach unten gedrückt, wenn der Menüpunkt schwebte. Dies bewirkt, dass ein problem mit der Dritten Ebene, als wenn Sie mit der Maus-aus die Dritte Ebene bricht alles zusammen, und Sie den Fokus verlieren, aber ich glaube nicht, dass es hart werden würde, um dieses Menü funktioniert mit Klicks statt mit der Maus. (einfach hinzufügen/entfernen einer Klasse auf klicken Sie auf. Siehe Edit.)

    Aber hier ist, was Sie tun möchten:

    .dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

    http://jsfiddle.net/HCxB8/4/

    Du wirst sehen, wie Sie mit der Maus über das Menü wird nach unten gedrückt. Dies ist aufgrund mich positioning relative und nicht als absolute.

    BEARBEITEN:

    Mit ein bisschen mehr Gefummel habe ich es geschafft, bekommen Sie auf klicken, um die Arbeit mit sehr wenig jquery und ein bisschen mehr css:

    JS:

    $('.dropdown-submenu > a').click(function(){
    $(this).parent().children('.dropdown-menu').toggleClass('shown');
});

    CSS:

    .dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

.dropdown-submenu:hover > .dropdown-menu{
    display: none;
}

.shown{
    display: block;
}

.dropdown-submenu:hover > .shown{
    display: block;
}

    http://jsfiddle.net/HCxB8/5/

    InformationsquelleAutor Don

Schreibe einen Kommentar