El intento de crear un menú desplegable rápida jQuery

Question

No estoy seguro si estoy haciendo bien, pero estoy tratando de crear un sencillo menú desplegable en jQuery. Básicamente quiero un div (con enlaces) que aparecerá una vez que el elemento de menú se cernió sobre ..

El menú:

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

El Div Hidden:

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

El jQuery:

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

Ahora, esto se desvanece en el div oculto y se desvanece a cabo muy bien, pero - ¿cómo lo paro de la decoloración si alguien se cierne sobre algo dentro del div mostrado recientemente

Lo siento si esto es una pregunta muy obvia .. todavía estoy aprendiendo! :)

Answer 1

Creo que es necesario separar el manejo de eventos y mouseover mouseout.

Es de suponer que desea que el controlador mouseover a estar unida al elemento de menú "nivel superior", y el manejador mouseout a estar unido a la escondida "desplegable" div (con un código de estado para gestionar los conflictos).