Foros del Web » Creando para Internet » CSS »

Menu desplegable no funciona en IE 7/8

Estas en el tema de Menu desplegable no funciona en IE 7/8 en el foro de CSS en Foros del Web. Espero puedan darme una mano con este codigo que vengo luchando hace tiempo. Es un menu en css que se ubica por sobre un swf. ...
  #1 (permalink)  
Antiguo 12/09/2010, 16:14
Avatar de maxi_lance  
Fecha de Ingreso: julio-2006
Ubicación: Capital Federal
Mensajes: 220
Antigüedad: 11 años, 5 meses
Puntos: 2
Menu desplegable no funciona en IE 7/8

Espero puedan darme una mano con este codigo que vengo luchando hace tiempo.
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">&nbsp;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}
los estilos del menu desplegable:

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 !!
  #2 (permalink)  
Antiguo 12/09/2010, 17:40
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: Menu desplegable no funciona en IE 7/8

prueba hacer el despliegue en javascript
  #3 (permalink)  
Antiguo 12/09/2010, 18:27
Avatar de maxi_lance  
Fecha de Ingreso: julio-2006
Ubicación: Capital Federal
Mensajes: 220
Antigüedad: 11 años, 5 meses
Puntos: 2
Respuesta: Menu desplegable no funciona en IE 7/8

gracias por la respuesta!

pero queria saber si podia solucionar este problema, ya que realizar todo nuevamente en javascript me lleva bastante tiempo.

alguna otra idea ??

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:47.