导航下拉切换问题与引导程序

Posted 2023-05-08

【中文标题】导航下拉切换问题与引导程序

【英文标题】：Navigation Drop-Down Toggle Issues with Bootstrap

【发布时间】：2013-04-27 00:01:18

【问题描述】：

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

这是根据使用 Bootstrap 的主题设计的。在Thesis上实现，取自定义站点的代码，安装在子文件夹中，复制粘贴到自定义页面模板中。

现在我正在尝试在我的自定义论文设计中模仿整个站点的导航菜单：www.seosherpas.com/blog/

我设法模仿了设计，但无法使下拉菜单起作用。我觉得这是我如何调用 Bootstrap 的 javascript 的问题......也许，也许不是。我真的不知道。

我有这行代码可以暂时隐藏下拉菜单：

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

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

【参考方案1】：

将此添加到您的 CSS：

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

当您将鼠标悬停在下拉列表的父元素 .nav-collapse 上时，您只会看到下拉列表。每次都有效，每个浏览器。尽情享受吧！

【讨论】：

谢谢，乔希！这几乎完全可以解决问题。现在，当我将鼠标悬停在一个列表上时，所有三个都打开了。想法？

没关系！明白了：ul.nav li.dropdown:hover > ul.dropdown-menu display: block; 非常感谢您的帮助！

嗯...实际上，不完全工作。现在下拉列表中的顶部链接不起作用... :(

如果你有一个 jsFiddle，我很乐意为你修复它。

嗨乔希，明白了 :-) 我必须删除链接上的一个类。现在工作很棒！感谢您的帮助！