Bootstrap onhover用于多级菜单

Question

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

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

我的问题在下面的小提琴中说明。谢谢！

（尝试在这里搜索类似的问题，但找不到我要找的东西）

http://jsfiddle.net/M7WHA/

Answer 1

使用immediate child selector >之类的：

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

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