javascript - Bootstrap 的导航下拉切换问题

Question

我最近在 www.seosherpas.com 重新设计了我的 Wordpress 网站的主页。

这是基于使用 Bootstrap 的主题设计的。它是通过获取自定义站点的代码在 Thesis 上实现的，该站点安装在子文件夹中，然后复制并粘贴到自定义页面模板中。

现在，我正尝试在我的自定义 Thesis 设计上模仿整个站点的导航菜单:www.seosherpas.com/blog/

我已设法模仿该设计，但无法使下拉菜单正常工作。我有一种感觉，这是我如何调用 Bootstrap 的 Javascript 的问题……也许，也许不是。我真的不知道。

我有这行代码暂时隐藏下拉列表:

.nav-collapse .dropdown-menu {
border-bottom: 1px solid #DDDDDD;
/* Temporary Fix??? display: block; */
}

如果我显示'display: block;'下拉菜单出现但总是出现，而不是仅在悬停时出现。

Answer 1

将此添加到您的 CSS:

.nav-collapse:hover .dropdown-menu {
    display: block;
}

只有当您将鼠标悬停在作为下拉菜单的父元素的 .nav-collapse 元素上时，您才会看到下拉菜单。每次都有效，每个浏览器。享受吧!