html - Twitter Bootstrap 导航下拉菜单

Question

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

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

Answer 1

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

改变

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

至

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