Effects on mouseenter hover looping in Firefox
I've uploaded a test page to show the problem I'm having:
http://www.merzikain.com/jquery-test/test.html
What I have is a navigation using an unordered list with nested lists for navigation items that have sub pages.
<ul id="nav">
<li id="page1">
page 1
<ul id="page1sub">
<li>sub page</li>
</ul>
</li>
</ul>
I was using $("#page1").hover to set $("#page1sub").show and .hide then changed it to use .mouseenter and .mouseleave but both have the same issue.
When navigating the menu quickly I end up with #page1sub looping through it's .show action. I also tried using .toggle with no change. As long as the cursor is over the area the effect loops over and over. If you move the cursor out it stops and then you can try again. The only way to get it to react properly is to move the cursor over #page1 then wait for #page1sub to fully appear before moving the cursor over it.
I haven't been able to duplicate the issue in IE8, I'm using FF 3.6.3 and Windows XP. Not sure why it only affects FF for me.
I thought maybe it was some of the other jq plugins conflicting or something but even after removing those it continues acting funky.
Try moving the mouse over a button from top down to activate and then hover over the sub menu. Leave the cursor over where the menu will be and you'll see what I'm talking about. It may take a few tries. Sometimes it just makes the menu disappear and other times it will keep playing the show action over and over.