html – Bootstrap 3：如何显示侧面导航栏的子菜单,每个菜单的底部？

概述我正在尝试使用Bootstrap 3制作侧面导航栏.现在子菜单显示在每个菜单的右侧.我想将它显示在父菜单的底部. <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px 我正在尝试使用bootstrap 3制作侧面导航栏.现在子菜单显示在每个菜单的右侧.我想将它显示在父菜单的底部.

<ul  role="menu" aria-labelledby="dropdownMenu" >      <li >        <a tabindex="-1" href="#">More options</a>        <ul >          <li >            <a href="#">More..</a>            <ul >                <li><a href="#">3rd level</a></li>                <li><a href="#">3rd level</a></li>            </ul>          </li>        </ul>      </li>      <li ></li>      <li >        <a tabindex="-1" href="#">More options2</a>        <ul >          <li><a tabindex="-1" href="#">Second level</a></li>          <li >            <a href="#">More..</a>            <ul >                <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等.

解决方法 您可以通过不从文档流中删除子菜单来实现此效果.这意味着当菜单项悬停时,所有内容都会被推下.这确实导致了第三级的问题,因为当你将鼠标移出第三级时,一切都会崩溃,你会失去焦点,但我不相信这个菜单很难通过点击而不是徘徊来运行. (只需在点击时添加/删除一个类.请参阅编辑.)

但这是你想要做的：

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

总结

以上是内存溢出为你收集整理的html – Bootstrap 3：如何显示侧面导航栏的子菜单,每个菜单的底部？全部内容，希望文章能够帮你解决html – Bootstrap 3：如何显示侧面导航栏的子菜单,每个菜单的底部？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。