为什么我的 Superfish 菜单在 Firefox 中无法正常工作？答案

【问题标题】：Why isn't my Superfish menu working properly in Firefox?为什么我的 Superfish 菜单在 Firefox 中无法正常工作？
【发布时间】：2013-07-02 13:40:53
【问题描述】：

我正在尝试使用Superfish jQuery 插件来增强网站上的下拉菜单。但是，当光标在 Firefox 浏览器 (v. 21.0) 中悬停在下拉菜单上时，它不会打开。在 Chrome 和 Opera 中它可以工作。如果没有 Superfish 插件，下拉菜单也可以在带有纯 CSS 的 Firefox 中使用。

当为 Superfish 使用 cssArrows 选项时，箭头不会显示在任何浏览器中（即使使用更多填充）。我不知道这个问题是否与第一个有关。

这是我的标记：

<nav>
    <ul>
        <li><a href="#">Page 1</a></li>
        <li>
            <a href="#">Page 2</a>
            <ul>
                <li><a href="#">Page 2.1</a></li>
                <li><a href="#">Page 2.2</a></li>
                <li><a href="#">Page 2.3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Page 5</a></li>
    </ul>
</nav>

这是我的 CSS/SASS：

 nav {
    width: 100%;
    float: left;

    ul {
        display: block;
        float: left;
        width: 100%;

        li {
            position: relative;
            display: block;
            float: left;

            a {
                display: block;
                padding: 14px 14px;
            }
            /* drop-down */
            ul {
                display: none;
                position: absolute;
                left: 0;
                top: 100%;
                padding: 0;
                border: 1px solid #aaa;
                border-top-width: 0;

                li {
                    float: none;
                    a {
                        padding: 8px 3px;
                        border-top: 1px solid #aaa;
                    }
                }
            }

            &:hover,
            &.sfHover {
                ul {
                    display: block;
                }
            }
        }
    }
}

这是我的 Superfish 电话：

$('nav').superfish();

在 Firefox 中，当我将鼠标悬停在包含二级菜单的 li 标记上时，li 不会得到应有的 sfHover 类。相反，顶级ul 获得分配给它的sfHover 类。然后，当我在该li 标签上按下鼠标左键时，它会获得“sfHover”标签并显示下拉菜单。在 Chrome 和 Opera 中，sfHover 类被分配给正确的元素。

Superfish 插件站点中的示例也适用于我的 Firefox 浏览器，但它们并没有帮助我解决这个问题。我对菜单的 html 标记与这些示例中的几乎相同。

我试过了

将 z-index 分配给不同的元素，但它没有帮助（没想到）。现在页面上的任何元素都没有分配 z-index。
在 li 和 a 元素上分配宽度，因为我读过它有帮助解决了一些问题。
使用 Superfish 示例中的样式表，但效果并不好。
使用margin-left: -9999px 隐藏下拉菜单，而不是 display: none 但这没有帮助。
在初始化 Superfish 时使用所有选项
在a标签上使用position: relative而不是li标签

我还检查了我的 html 是否有效。

谁能找出问题所在？非常感谢任何建议。

【问题讨论】：

可以加个jsFiddle吗？
@screenmutt，我敲响了一个小提琴：jsbin.com/okafoz/1/edit 在 FF22 中似乎还不错。
感谢两位。小提琴在 FF21 中也适用于我。还有什么可能导致这种情况？
如果没有访问您的项目，我们无法解决这个问题。你能在网络上公开它吗？
不幸的是我不能。我希望我错过了一些明显会出现在解释或提供的代码中的东西。

标签： javascript html css sass superfish

【解决方案1】：

我无法在 Firefox 21 中测试它，因为我的 Firefox 刚刚更新到 22。

但在 22 中它按预期工作，这是我测试的地方：http://jsbin.com/okafoz/1/edit

这可能是与 Superfish 无关的问题。

【讨论】：

谢谢。这减少了可能原因的数量。

【解决方案2】：

好的，问题不在于 jQuery 版本。我想我只是暂时错误地认为它有效。

我在项目中使用 wordpress 3.5.2，它与 superfish 冲突。我现在没有时间研究太多，但我发现了这么多：

wp-includes/js/admin-bar.min.js 使用 hoverIntent 函数，如果在执行该脚本时已经包含 jQuery 但未定义 hoverIntent，它会定义函数 jQuery.fn.hoverIntent 本身。

hoverIntent jQuery 插件可以选择与 superfish 一起使用。 superfish 调用该插件的hoverIntent 函数一次，如果它已定义。此调用导致我的下拉菜单不显示，因为当我将光标悬停在包含子菜单的列表项上时它导致错误（admin-bar.min.js 中的“b.browser 未定义”）。

它只出现在 Firefox 中的原因是我只在 Firefox 中登录了这个 wordpress 站点，而不是在其他浏览器中...

但是：在 superfish 中有一个选项 disableHI。如果将其设置为true，superfish 将不会调用 hoverIntent。我以为我已经尝试过该选项，但无论如何，它当然有效。

【讨论】：