Dropdown con jQuery

Hola:

Tengo un menú compuesto por varias listas y una de ellas será un desplegable. El problema es que el desplegable no se encontrará como un submenú, si no que es una capa (div) definido a parte del menú. Lo que quiero hacer es que al poner el ratón encima de esa lista, esa capa aparezca (hasta ahí todo bien), y que el desplegable aguante unos segundos si el ratón no está encima de él, aunque si el ratón está encima dejarlo abierto para poder navegar por él, y cuando quiten el raton y pasen unos segundos se cierre.

Con CSS hay miles de tutoriales, pero para hacerlo con submenús en listas.
Probé de todo, incluso así:

$(function() {
  
  $( "li.desplegable" ).on({
    mouseenter: function() {
      $( '.desplegado' ).css('display', 'block');
    }, mouseleave: function() {
      if($( '.desplegado' ).mouseover()){
        $( '.desplegado' ).css('display', 'none');
      } else {
        $( '.desplegado' ).css('display', 'block');
      }
    }
  });


});

(Era obvio que no funcionaría XD)

El html sería algo así:

...head de la página...

<header>
  <div class="desplegado">contenido desplegable</div>
  <nav>
    <ul>
      <li><a href="">enlace</a></li>
      <li class="desplegable"><a href="">desplegar menù</a></li>
      <li><a href="">enlace</a></li>
    </ul>
  </nav>
</header>

A las malas lo he intentado hacer así:

$(function(){


  $('li.desplegable').hover(function(){
    $('.desplegado').slideDown('slow');
  });
  $('.desplegado').mouseleave(function(){
    $('.desplegado').delay(600).slideUp('slow');
  });


});

Pero claro, si no pasas el ratón por encima del contenido desplegado no va a cerrarse...

bueno creo que lo mejor es usar las clases .mouseenter y .mouseleave ,problemas, estas clases requieren de mucho trabajo para que funcionen como es debido en un menu, pero analíticamente deveria servir.

en lo personal recomiendo el uso de css para esto debido a que es mas corto

Hola @codomodragon:

Sí, he estado haciendo muchas prácticas pero he logrado lo que puse arriba o algo parecido, y no era exactamente lo que quería. En principio quería hacerlo sólo con CSS, pero no tengo ni idea de como afectar desde la lista desplegable a la capa que no se encuentra en la lista (aunque sí en el mismo elemento padre, header)

agggggg se me apago la pc 2 veces aggggggggg cuando tenia el texto completo.

ok deja te explico, es facil solo debes jugar con los li u los ul

<ul class='menu'>
  <li>
    <a>no desplegable</a>
  </li>
  <li>
    <a>desplegable</a>
    <ul class='menu-ijo'>
      <li>
        <a>hola</a>
      </li>
    </ul>
  </li>
</ul>

como vez solo creamos una lista y le agregamos una clase, luego creamos otra lista dentro de uno de los elementos de la anterior y le agregamos otra clase, lo dmas es con css

.menu ul {
	position:		absolute;
	top:			-999em;
	width:		10em; 
}
.menu ul li {
	width:			100%;
}
.menu li:hover {
	visibility:		inherit;
}
.menu li {
	float:			left;
	position:		relative;
}
.menu a {
	display:		block;
	position:		relative;
}
.menu li:hover ul,
.menu li.sfHover ul {
	left:			0;
	top:			30px;
	z-index:		150;
}
ul.menu li:hover li ul,
ul.menu li.sfHover li ul {
	top:			-999em;
}
ul.menu li li:hover ul,
ul.menu li li.sfHover ul {
	left:			5em; 
	top:			0;
}
ul.menu li li:hover li ul,
ul.menu li li.sfHover li ul {
	top:			-999em;
}
ul.menu li li li:hover ul,
ul.menu li li li.sfHover ul {
	left:			5em;
	top:			0;

ok como vez esto es algo extenso pero en esencia solo estoy diciendo que el ul tendrá sus elementos alineados debajo del anterior al poner sobre el li el puntero los muestre acia abajo y que sean visibles, lo demas , son pequeños ajustes para lograr que todo quede en su sitio.

pd no explique casi nada por que cada vez que terminaba se me apagaba la laptop >_< si no entiendes te lo explico mas a detalle

Sí sí, de esa manera ya sé hacerlo, pero el div desplegable no está dentro de la lista como si fuese un submenú :p

De todos modos, lo dejaré así hasta que sea necesario cambiarlo, y ya sería más bien una duda de CSS :)

Saludos y gracias por la respuesta :)

haaa ok ya me extrañaba esta pregunta de tu parte jeje xD

igual seguiré investigando un poco y si encuentro algo lo comento por acá
además tengo que terminar algún día mi guía de ajax xD