Why isn't my Superfish menu working properly in Firefox?

Question

I'm trying to use Superfish jQuery plugin to enhance a drop-down menu on a website. However, the drop-down menu doesn't open when the cursor hovers over it in Firefox browser (v. 21.0) as it should. In Chrome and Opera it works. Without the Superfish plugin the drop-down menu works also in Firefox with plain CSS.

When using the cssArrows option for Superfish, the arrows don't show up in any browser (even when using more padding). I don't know if this problem is related to the first one.

Here's my markup:

<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>

And here's my 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;
                }
            }
        }
    }
}

Here's my Superfish call:

$('nav').superfish();

In Firefox, when I hover over the li tag that holds the second level menu, the li doesn't get sfHover class as should happen. Instead, the top-level ul gets sfHover class assigned to it. Then, when I press left mouse button down on that li tag, it gets the 'sfHover' tag and the drop-down menu shows up. In Chrome and Opera sfHover class gets assigned to the right elements.

The examples from Superfish plugin's site work also in my Firefox browser but they didn't help me to solve this. My html markup for the menu is almost the same as in those examples.

I've tried to

• assign z-indexes to different elements, but it didn't help (didn't expect to). Currently no element on the page has z-index assigned to it.
• assign widths on li and a elements since I had read that it had helped in some problem situations.
• use the stylesheets from Superfish examples but they didn't work any better.
• hide the drop-down menu with margin-left: -9999px instead of display: none but that didn't help.
• use all options when initializing Superfish
• use position: relative on a tags instead of on li tags

I've also checked that my html validates.

Can anyone figure out what's the problem? I'd greatly appreciate any suggestions.

Answer 1

I can't test it in Firefox 21, as my Firefox has just updated to 22.

But in 22 it works as expected, here's where i tested: http://jsbin.com/okafoz/1/edit

It is probably a non-Superfish related issue.

Answer 2

Ok, the problem wasn't jQuery version. I think I just momentarily misthought it worked.

I'm using wordpress 3.5.2 in the project and it conflicted with superfish. I don't have time to look too much into it right now, but this much I found out:

wp-includes/js/admin-bar.min.js uses hoverIntent function, if at the time of execution of that script jQuery is already included but hoverIntent isn't defined, it defines function jQuery.fn.hoverIntent itself.

hoverIntent jQuery plugin can be optionally used with superfish. superfish calls hoverIntent function of that plugin once, if it's defined. This call caused my drop-down menu to not show up, since it caused an error when I hovered cursor over the list item holding a submenu ("b.browser is not defined" in admin-bar.min.js).

The reason it only showed up in Firefox was that I was only logged in to this wordpress site in Firefox, not in other browsers...

But: there's an option disableHIin superfish. If you set that to true, superfish won't call hoverIntent. I thought I had tried that option already but anyway, it worked of course.