Es un menu en css que se ubica por sobre un swf. El menu tiene desplegables en cada seccion.
Se despliegan de manera correcta, pero al intentar navegar el primer desplegable de abajo hacia arriba, recorriendo las opciones, desaparece el desplegable como si hubiese salido de la zona del hover. No ocurre lo mismo en el segundo desplegable, ya que en este puedo recorrer de abajo hacia arriba y viceversa sin problemas.
En Mozilla si funciona OK.
Este mismo menu lo tengo en otras secciones, pero no contienen el swf debajo. En estas otras secciones funciona OK.
el link es: http://ww3.funedu.org.ar/
el codigo donde esta este script es:
Código HTML:
<div id="movie_up"> <div id="headerint2"> <ul id="nav"> <li class="top"><a href="institucional.php" id="shop" class="top_link"><span class="down"> Quienes Somos</span></a> <ul class="sub"> <li><a href="mision.php">MISION</a></li> <li><a href="vision.php">VISION</a></li> <li><a href="valor.php">VALOR</a></li> <li><a href="historia.php">HISTORIA</a></li> <li><a href="autoridades.php">AUTORIDADES</a></li> </ul> </li> <li class="top"><img src="img/sep-menu.png" border="0" align="absmiddle" /></li> <li></li> .... .... </div></div> <div id="movie_down" align="center">***codigo del swf***</div>
los estilos son:
Código HTML:
#headerint2 {width: 976px;height: 335px;margin:0 auto 0 auto; border: #006633 0px solid;}
#movie_up{ width: 100%;height: 445px; position:absolute; z-index:1500; }
#movie_down{ position:relative; z-index:1400; width: 100%; height: 445px; padding:0px; background-color: #000000}
Código HTML:
#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px; }
#nav li a.top_link {display:block; float:left; height:41px; line-height:33px; color: #FFFFFF; text-decoration:none; font-size:16px; font-weight:normal; padding:0 0 0 1px; cursor:pointer;background: transparent;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:29px; background: transparent;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:29px; background: transparent; }
#nav li:hover a.top_link { height:43px; background: url(vin03.png) 4px 14px no-repeat;}
#nav li:hover a.top_link span {height:43px; background:url(transp.png) 4px 1px repeat;}
#nav li:hover a.top_link span.down {height:43px; background:url(transp.png) 4px 1px repeat;}
/* Default list styling */
#nav li:hover {position:relative; z-index:100;}
/*primer desplegable*/
#nav li:hover ul.sub
{left:1px; top:41px; padding:3px; white-space:nowrap; width:170px; height:auto;}
#nav li:hover ul.sub li
{padding-left:5px; display:block; height:20px; margin-bottom:2px; position:relative; float:left; width:175px; font-weight:normal; background:url(transp.png) 4px 14px repeat ;}
#nav li:hover ul.sub li a
{padding-left:5px; display:block; font-size:12px; height:20px; width:175px; line-height:18px; text-indent:5px; color:#fff; text-decoration:none;}
#nav li ul.sub li a.fly
{ }
#nav li:hover ul.sub li a:hover { background: url(vin04.png) 0px 6px no-repeat; color:#fff;}
#nav li:hover ul.sub li a.fly:hover {background: url(vin04.png) 0px 6px no-repeat; color:#fff;}
/* despegable de primer desplegable*/
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:178px; top:-3px; background:url(transp2.png) 130px 6px no-repeat; padding:3px; border:0px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background: url(vin04.png) 0px 6px no-repeat; color:#fff;}
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(vin04.png) 0px 6px no-repeat; color:#000;}
Entiendo que es un poco largo el codigo, pero espero haber sido claro.
Muchas Gracias de antemano !!
