【问题标题】: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;'下拉菜单出现但始终出现,而不是仅在悬停时出现。

【问题讨论】:

    标签: javascript css wordpress twitter-bootstrap hover


    【解决方案1】:

    将此添加到您的 CSS:

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

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

    【讨论】:

    • 谢谢,乔希!这几乎完全可以解决问题。现在,当我将鼠标悬停在一个列表上时,所有三个都打开了。想法?
    • 没关系!明白了:ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; } 非常感谢您的帮助!
    • 嗯...实际上,不完全工作。现在下拉列表中的顶部链接不起作用... :(
    • 如果你有一个 jsFiddle,我很乐意为你修复它。
    • 嗨乔希,明白了 :-) 我必须删除链接上的一个类。现在工作很棒!感谢您的帮助!
    猜你喜欢
    • 2015-08-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-12
    • 1970-01-01
    • 2016-11-16
    • 1970-01-01
    相关资源
    最近更新 更多