Html Bootstrap 3：如何显示侧导航栏的子菜单，每个菜单的底部？

我试图使侧导航栏使用引导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>

这是你的电话号码

编辑：

---

我试着用折叠来做。但仍然存在一些问题。我想在开始时隐藏折叠项，并删除水平线等。

您可以通过不从文档流中删除子菜单来实现此效果。这意味着当菜单项悬停时，所有内容都被按下。这确实会导致第三级出现问题，比如当你将鼠标移出第三级时，所有的东西都会折叠起来，你会失去焦点，但我不相信用鼠标点击而不是鼠标悬停来让菜单正常工作会很困难。（只需单击即可添加/删除类。请参见编辑。）

但你要做的是：

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

当你将鼠标放在菜单上时，你会看到菜单被按下。这是因为我的定位是相对的，而不是绝对的

编辑：

通过更精细的操作，我成功地使用非常少的jquery和更多的css来点击：

JS:

CSS:

---

要显示第一级中的每个子菜单吗？给

左：0

和

顶：30px（值取决于高度）

到

。下拉子菜单>。下拉菜单

。希望这是您想要的。然后您需要为下拉菜单提供

position:relative

，就像您可以在类中删除以隐藏折叠的项目一样

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

.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;
}