Attempting to create a quick jQuery drop down menu..

Question

Hi all, am not sure if I'm doing this right, but I'm trying to create a simple drop down menu in jQuery. I basically want a div (with links) to appear once the menu item is hovered over..

The Menu:

<ul id="mainlevel">
  <li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
  <li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
  <li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>

The Hidden Div:

<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>

The jQuery:

$(".mainlevel_feature-writers").hover(function(){ 
  $(".subMenu").fadeIn("slow"); 
}, function() { 
  $(".subMenu").fadeOut("slow"); 
});

Now, this fades in the hidden div and fades it out fine, but - how do I stop it from fading out if someone hovers on something inside the newly shown div?

Sorry if this is a really obvious question.. I am still learning! :)

Answer 1

I think you need to separate the handling of mouseover and mouseout events.

Presumably, you want the mouseover handler to be attached to the "top level" menu element, and the mouseout handler to be attached to the hidden "dropdown" div (with some state code to manage conflicts).