Mostrar/Ocultar Capas con slideDown

[José Molina]

Saludos Cordiales

Tengo 2 Capas Generales:

Código:

<div id="menuboton1">
 Colocate aqui
</div>

Código:

<div id="sub1">
  <ul><li>Esto es</li><li>Esto no es</li></ul>
</div>

La capa "sub1" esta oculta y al colocarme sobre "menuboton1" debe aparecer "sub1" con un barrido. Luego al pasar el mouse sobre "sub1" esta capa debe permanecer activa, hasta que saque el mouse de sobre ella.

Lo estoy haciendo así:

Código:

<script language="javascript">
                  $(document).ready(function(){
                                 //animación del texto con easing
                                 $("#menuboton1").mouseover(function(){
                                                  $('#sub1').slideDown('fast');     
                                 });
                                 
                                 $("#menuboton1").mouseout(function(){
                                                 $("#sub1").mouseout(function(){
                                                                 $('#sub1').slideUp('fast');
                                                 });
                                 });
                  })
                  </script>

Todo va bien, pero me ocurre lo siguiente: La capa "sub1" mide 400px de ancho x 400px de alto. El "UL" que contiene la capa "sub1" mide 100px de ancho x 100px de alto.

En el momento que paso el mouse por encima de las opciones "LI" del "UL", la capa "sub1" se oculta.

Cómo le digo al jquery que si el mouse esta sobre la capa "Sub1" o cualquier otro elemento que "sub1" contenga, debe permanecer abierta?

Muchas Gracias