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>

这里是演示。

编辑： 我尝试使用折叠jsfiddle.net/mridulpv/Wrh8x/5。但仍然存在一些问题。我想在开始时隐藏折叠项目，并删除水平线等。

- mridul

---

第一级有子菜单。 - mridul

给.dropdown-submenu>.dropdown-menu设置left: 0和top:30px（值取决于高度）。查看此演示。希望这是您想要的。 - anpsmn

然后您需要给下拉菜单添加position:relative，就像这样。 - anpsmn

您可以在类中删除以隐藏折叠的项目。 - Nimmi

jsfiddle - Nimmi

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/

- Don