Search code examples
javascripthtmlcsssasssuperfish

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

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.

Solution

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