Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/02/2010, 18:34
norbertohdez
 
Fecha de Ingreso: septiembre-2008
Mensajes: 18
Antigüedad: 15 años, 7 meses
Puntos: 0
Aplicar pequeño delay a un dropdown con jquery

Hola, tengo dropdown multinivel en CSS, funciona asi, sin JS sólo html y CSS. El asunto aquí es, nesecito mediante jquery darle un pequeño delay antes de que se escondan los submenues luego de hacer mouseout. Como mi formulario css no funciona con js no tengo una idea de como hacer esto.

Me imagino que primero deberé asignar la función de dropdown como si no funcionara con solo CSS y ahí darle ese dalay... algo asi segun yo... Aqui es donde necesito una pequeña orientación por dónde empezar :S Alguna idea?

Aquí mi css de menu haber si sirve de algo.

Código:
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:0;}
#menu ul li {margin:0 0 4px 0;}
#menu li {margin:0; padding:0; list-style:none;width:217px;height:34px;}
#menu li a {margin:0; padding:3px 20px 0 10px; list-style:none;width:187px;height:31px;display:block;}

#menu a {text-indent:-9999px;}

#menu ul ul li {margin:0; padding:0; list-style:none;text-indent:0px;width:235px;}
#menu ul ul li a {margin:0; padding:3px 20px 0 10px; list-style:none;text-indent:0px;width:205px;}
#menu ul ul ul li a {margin:0; padding:3px 20px 0 20px; list-style:none;text-indent:0px;width:195px;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;border: 1px solid #666;background: #fff;-moz-border-radius: 10px;}
#menu ul#toplevel {position:absolute; left:0; top:0;}

#menu a {display:block; font:normal 13px verdana,arial,sans-serif;line-height:22px; text-decoration:none;} 

#menu ul li:hover > ul {left:100%; margin-top:-34px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu ul ul li a {color:#492F18;font-weight: bold;} 
#menu ul ul li a:hover {color:#9dc435;} 
#menu ul ul li:hover > a {color:#9dc435;}
#menu ul ul li a.fly {background: url(../images/orange.png) no-repeat 95% 5px;}
#menu ul ul li a.fly:hover {background: url(../images/orange.png) no-repeat 95% 5px;} 
#menu ul ul li:hover > a.fly {background:url(../images/orange.png) no-repeat 95% 5px;}
#menu ul ul ul li a {background: url(../images/naranja.png) no-repeat 2px 7px;}