Css Twitter Bootstrap 多级下拉菜单

Updated Answer个

^{*更新了支持v2.1.1** bootstrap 版样式表的答案.}

^{**但要小心，因为此解决方案已从v3中删除}

我只想指出这个解决方案不再需要了，因为最新的 bootstrap 现在默认支持多级下拉.如果您使用的是旧版本，您仍然可以使用它，但是对于那些更新到最新版本( compose 本文时是2.1.1版)的人来说，就不再需要它了.以下是文档中直接更新的默认多级下拉列表:

http://jsfiddle.net/2Smgv/2858/

Original Answer个

在GitHub的子菜单支持上出现了一些问题，这些问题通常是由 bootstrap 程序开发人员来解决的，比如this one，所以我认为应该留给使用 bootstrap 程序的开发人员来解决一些问题.这是我放在一起的一个演示，它向你展示了如何拼凑出一个有效的子菜单.

相关代码

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

创建了我自己的.sub-menu个类来应用于2级下拉菜单，这样我们就可以将它们放置在菜单项旁边.还修改了箭头，使其显示在子菜单组的左侧.

Demo