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í:
Código:
$(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í:
Código:
...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>