Question

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

对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-indexes分配给不同的元素，但它没有帮助（没想到）。目前页面上没有元素为其分配了z-index。
指定li和a元素的宽度，因为我已经读过它了帮助解决了一些问题。
使用来自Superfish示例的样式表，但它们没有更好的效果。
使用margin-left: -9999px而不是隐藏下拉菜单 display: none但这没有帮助。
初始化Superfish时使用所有选项
在position: relative代码而不是a代码

li

我还检查过我的html验证。

任何人都可以找出问题所在吗？我非常感谢任何建议。

Answer 1

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

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

这可能与非Superfish有关。

Answer 2

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

我在项目中使用wordpress 3.5.2，它与superfish冲突。我现在没时间看太多了，但是我发现了很多：

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

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

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

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

为什么我的Superfish菜单在Firefox中无法正常运行？

2 个答案: