Añadir Delay en hover, menu multinivel Jquery y CSS

[resback]

Tengo este menú multinivel montado en una página web:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Tiene un efecto hover que al poner el mouse y al quitarlo añade una animación de desenvolverse, este menu tiene opciones de controlar el tiempo de la animación.

Lo que me interesa saber  es como controlar el tiempo en el que quitas el puntero del menu y se activa el efecto de desenrrollarse. Ya que basta unos milisegundos que tengas el puntero fuera del área del menú y se oculte todo totalmente.

Este menú tiene exactamente el efecto deseado, pero quiero hacerlo en el menu que mencione primero (DynamicDrive)

http://users.tpg.com.au/j_birch/plugins/superfish/example.html

** Duda opcional **

En el primer menú se aplica el ID y CLASS a una capa <DIV>, y dentro de ella esta la etiqueta <Ul> que no tiene ningún ID y CLASS, si quiero poner ese ID y CLASS a la etiqueta "<UL>" deja de funcionar el menú.

El segundo menú tiene un ID y CLASS en la etiqueta <UL> directamente sin DIVS, si pongo ese código en una etiqueta superior,"<DIV>" el menú no funciona más.

------

Me gustaría saber  como hacer que el segundo menú (superfish) se apliquen los ID y CLASS a una etiqueta "<DIV>" Y DENTRO DE ELLA <UL>

Ejemplo:

<div class="sf-menu" id="example">

<ul>

 <li></li>
 <li></li>

</ul>

</div>


Saludos y gracias por sus comentarios

[Alex Rodríguez]

Hola, en el segundo menú parece que el efecto de retrasar la desaparición del menú se logra con este código:

        // A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

Que tal como indica "introduce un retardo en el evento mouseOut. La idea sería tratar de aplicar esta función al otro menú, pero si te fijas en el código del primer menú, está cargando jQuery desde internet con:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Tendrías que tener jQuery en tu servidor para modificar el código y crear el efecto deseado (habría que ver con calma cómo conseguirlo).

Sobre:

** Duda opcional **

En el primer menú se aplica el ID y CLASS a una capa <DIV>, y dentro de ella esta la etiqueta <Ul> que no tiene ningún ID y CLASS, si quiero poner ese ID y CLASS a la etiqueta "<UL>" deja de funcionar el menú.

Respuesta: es posible, depende de cómo esté programado el código. Si el código está programado para buscar un elemento UL dentro del elemento raíz (el dív) y tu cambias haciendo que el elemento raíz sea un UL, intentará buscar un UL dentro del raíz y no lo encontrará, por lo que no funcionará. Pero esto depende de cómo esté programado el código, puede que funcione de forma distinta a esta que te he comentado. Para comprobarlo tendrías que probarlo.

El segundo menú tiene un ID y CLASS en la etiqueta <UL> directamente sin DIVS, si pongo ese código en una etiqueta superior,"<DIV>" el menú no funciona más.

Respuesta: pasa exactamente lo mismo: depende de cómo esté programado el código.

Lo que dices de modificar el menú superfish, habría que estudiarlo con calma.

Saludos.