Bootstrap 3：如何顯示側面導航欄的子菜單，每個菜單的底部？

Question

我正在嘗試使用Bootstrap 3制作側面導航欄。現在子菜單顯示在每個菜單的右側。 我想將它顯示在父菜單的底部。

<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>

這是Demo。

編輯：我嘗試使用折疊jsfiddle.net/mridulpv/Wrh8x/5來做到這一點 。 但還是有些問題。 我想在開始時隱藏折疊項目，並刪除horizo​​ndal line等。

Answer 1

您可以通過不從文檔流中刪除子菜單來實現此效果。 這意味着當菜單項懸停時，所有內容都會被推下。 這確實導致了第三級的問題，因為當你將鼠標移出第三級時，一切都會崩潰並且你失去焦點，但我不相信這個菜單很難通過點擊而不是懸停來運行。 （只需在點擊時添加/刪除一個類。請參閱編輯。）

但這是你想要做的：

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

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

當鼠標懸停在菜單上時，你會看到被推下來。 這是由於我定位相對而非絕對。

編輯 ：

隨着更多的擺弄，我設法點擊使用非常小的jquery和更多的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/