我正在尝试使用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。但仍然存在一些问题。我想在开始时隐藏折叠项目,并删除水平线等。
.dropdown-submenu>.dropdown-menu
设置left: 0
和top:30px(值取决于高度)
。查看此演示。希望这是您想要的。 - anpsmnposition:relative
,就像这样。 - anpsmn