html - Bootstrap onhover 用于多级菜单

Question

我正在尝试实现由“悬停”触发的多级 Bootstrap 菜单。第一级工作得很好。然而，对于更深层次的菜单，菜单将所有内容都显示为“可见”。需要自定义 CSS 的帮助，以便悬停功能正常工作并仅显示所需的菜单项。

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

我的问题在下面的 fiddle 中有说明。谢谢!

(尝试在这里搜索类似的问题，但找不到我要找的内容)

http://jsfiddle.net/M7WHA/

Answer 1

使用 immediate child selector > 喜欢:

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

演示:http://jsfiddle.net/IrvinDominin/M7WHA/2/