Jquery drop down menu strange behavior

Question

My Problem (Fiddle)

My problem is that on my jquery animated dropdown menu, when you hover over the "Other" link, the sub menu does not appear. When using firefox to 'Inspect Element', I find height is animated, and the width appears to be alright, yet all I see is the left border.

I noticed that if I have that particular section display as a block, when you animate the first menu it is shown, but upon entering the unordered list, it disappears (ex). I imagine it is somehow related to this, but I can not figure out what is causing this.

Any incite into what I'm probably just overlooking would be great, and of course much appreciated.

Notes:

• I have had this problem in Firefox, Chrome, Opera, and IE.
• It's designed such that it could work with only css. The the first .each is overriding default css hover behavior.
• the empty span holds the arrow image.
• only relevant code is posted. However, you may view my site here
• If you have any tips on making something more efficient, always welcome.

Answer 1

http://jsfiddle.net/sailorob/4cdTV/5/

I've removed your CSS for simplicity's sake and simplified your functions by utilizing jQuery slideUp and slideDown, which essentially handle many of the css properties you were managing with your functions. From here, I think it would be fairly simple to work back in some of your CSS.

When utilizing javascript/jQuery/animation on menus, I highly suggest using timers (setTimeout) for firing mouseenters and 'leaves. This way, your menu is more forgiving when a user accidentally moves their mouse a few pixels out of the menu and it closes.

Answer 2

Well, in debugging the JS and CSS I found that if you remove ALL the JS you have, the drop down menu with sub menus work fine. The Other li opens up the ul below it just fine. Note, it doesn't animate without the JS though.

Here's a forked fiddle.

I tested it in latest Chrome and Firefox.