Esconder menu desplegable luego de retirar el cursor

[Cotelandia]

Hola, tengo un problema con un menu desplegable.

Código HTML:

<div id="nav">
		<div id="menu_nav">
				<li><a href="#">Menú</a></li>
		</div>
</div><!-- FIN NAV -->

<div id="menu_desplegable">
		<ul>
			<li><a href="#">Portada</a></li>
			<li><a href="#">Rubros</a></li>
		</ul>
</div><!-- FIN MENU DESPLEGABLE --> 

Código Javascript:

$(function(){
 
// Menu desplegable
 
    $('#menu_nav a').hover(function(e){
        e.preventDefault();
        $('#menu_desplegable')
            .filter(':not(:animated)')  //Filtrar el que no este siendo animado
            .slideToggle();             //realizar la animación
        }); 
});
 

Ahora el problema es el siguiente:

* Al desplegarse el menu, si voy sobre el, este se pliega nuevamente, osea al salir del "a", y no me deja seleccionar nada del menú.



+ Quiero que se pliegue solamente si se sale del "a" por los costados o por arriba, osea sin pasar por sobre el menú desplegable ya que si bajo el cursor al menú desplegable este se debe mantener visible.

+ También al sacar el cursor del menu desplegable este se debe ocultar. PERO si paso del menú desplegable al "a" (botón Menú) este (menú desplegable) no se debe ocultar.

Probe de todo pero no me funciono .. Gracias al que trate de ayudarme



--------
Ahora que me doy cuenta es como el menú de este foro xd

--------

Cuak! el problema estaba en el html y no el el js -.-

Ahora me quedo claro. Tanto me preocupe por el js que ni mire el html :/

Código HTML:

<div id="nav">
    <div id="menu_nav">
        <li><a href="#">Menú</a></li>
            <ul id="menu_desplegable">
                <li><a href="#">Portada</a></li>
                <li><a href="#">Rubros</a></li>
            </ul>
    </div>
</div><!-- FIN NAV -->
 

Perdón la molestia :P