Grow your CSS skills. Land your dream job.

Inconsistent hover in FF3

  • # June 25, 2008 at 11:03 am

    I’ve been trying to get a keyboard accessible modified Suckerfish menu to work for some time. I thought I’d finally gotten it working right, but I’m running into problems with the hover in FF3 that I don’t see in FF2. Sometimes it works, sometimes it doesn’t.

    Here’s the test I’m working with.
    http://bb.plsweb.com/Christy_test/Accessibility/keyboardaccess.html

    In FF3, when you roll over any of the top-level menus, the secondary menus appear as expected. However, when you try to click on anything in the nested secondary menu, it only works sporadically. Sometimes it works perfectly, but sometimes it disappears too fast for me to click on it. The hover doesn’t always persist, but I can’t figure out the pattern for when it works or doesn’t.

    (I have the same problem in Opera 9.5 for Windows, but I’m less concerned about that. My manager tested it on her Mac and said she didn’t have any problems.)

    Any ideas on how to make the nested menus stay open consistently?

    # June 25, 2008 at 11:21 am

    There’s a very small gap in between the top-level menu and the secondary ones. If you move your mouse too slowly, you lose the hover state on the top-level menu before you have a chance to point at the secondary one, so it disappears. If you move your mouse quickly, you’ll see that the secondary menu stays open.

    Your secondary menus are spaced 2.2em from the top:

    Code:
    #navmenu li ul {
    left:0pt;
    margin-left:-1000em;
    position:absolute;
    top:2.2em;
    width:12em;
    }

    I changed top:2.2em to top:2.1em, which got rid of the gap and it fixed it in FF3.

    # June 25, 2008 at 2:00 pm

    Geez. I knew I must be missing something really simple–but I didn’t even think of that.

    Thanks so much! This works perfectly now.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".