Twitter Bootstrap导航下拉列表

Question

我一直在尝试为我的网站添加三层导航系统。您可以在此处查看测试：http://see-gigs.com/

我得到的问题是第二层效果很好，您将鼠标悬停在该项目上并显示下拉列表。但是当第二层包含第三层时，在任何悬停之前，项目立即可见。关于为什么这不能正常工作的任何想法/建议？

Answer 1

您用来匹配下拉列表的选择器也与您的第二级下拉列表相匹配，因此当您将鼠标悬停在菜单项上时，这两个下拉菜单都会打开。要解决此问题，只需使用child selector仅匹配第一级下拉菜单，如下所示：

更改

ul#main-nav li.dropdown:hover ul.dropdown-menu {
    display: block;
}

要

ul#main-nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}