Foros del Web » Creando para Internet » CSS »

menú desplegable: funciona en firefox y chrome, pero no en explorer

Estas en el tema de menú desplegable: funciona en firefox y chrome, pero no en explorer en el foro de CSS en Foros del Web. Gente: hice un menú desplegable que anda muy bien en firefox y chrome, pero no puedo hacerlo andar en el explorer... si alguien puede darme ...
  #1 (permalink)  
Antiguo 08/03/2011, 11:33
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 19 años, 6 meses
Puntos: 1
menú desplegable: funciona en firefox y chrome, pero no en explorer

Gente: hice un menú desplegable que anda muy bien en firefox y chrome, pero no puedo hacerlo andar en el explorer... si alguien puede darme una mano sobre qué líneas modificar en el css, agradecido.
Se puede ver aqui:

http://www.rotaxmaxargentina.com.ar/

Las hojas de estilos son estilos_menu.css e intenté modificar una estilos_menu_ie.css pero no hay caso.

El código del menú

Código:
<div id="menu">
<ul>
  <li class="nivel1"><a href="index.php">INICIO</a></li>
  <li class="nivel1b"><a href="#">ROTAX BRP ARGENTINA</a>
	<ul class="dos">
			<li><a class="aref" href="acerca_de_rotax_brp.htm#">Acerca de Rotax BRP</a></li>
			<li><a href="distribuidores_en_argentina.htm">Distribuidores en Argentina</a></li>
			<li><a href="#">Motores</a></li>
			<li><a href="#">Merchandising</a></li>					
	</ul>
</li>
  <li class="nivel1c"><a href="#">COPA ROTAX ARGENTINA</a>
	<ul class="tres">
			<li><a href="acerca_de_rotax_brp.htm">Acerca de Copa Rotax</a></li>
			<li><a href="#">Reglamentos</a></li>
			<li><a href="#">Solicitud Inscripción</a></li>
			<li><a href="#">Copa Rotax Buenos Aires</a></li>
			<li><a href="#">Clasificaciones</a></li>
			<li><a href="#">Galería de imágenes</a></li>
	</ul>
</li>
  <li class="nivel1d"><a href="#" class="nivel1">LINKS</a></li>
  <li class="nivel1e"><a href="#" class="nivel1">CONTACTO</a></li>
</ul>
</div>
El css original

Código:
* { margin: 0px;
padding: 0px; outline: 0;
}

html, body { width: 100%;}

#menu {  
text-align: center;
background-image:url(elementos/fondo_menu.jpg);
height:100px;
font-size: 0.7em;
width: 1000px;
position: relative;
}

#menu ul { list-style-type: none;}

/*INICIO*/
#menu ul li.nivel1 
{ 
float: left;
width: 173px;
margin-right:67px;
position: relative;
display:block;
height:49px;
padding-right:10px;
padding-top:19px;
}
/*ROTAX BRP ARGENTINA*/
#menu ul li.nivel1b
{ 
float: left;
width: 240px;
padding-left:20px;
margin-left:-68px;
position: relative;
display:block;
height:49px;
padding-right:10px;
padding-top:19px;
}


#menu ul li.nivel1b:hover
{background-color:#666666;}
#menu ul li.nivel1:hover
{background-color:#666666;}
#menu ul li.nivel1c:hover
{background-color:#666666;}
#menu ul li.nivel1d:hover
{background-color:#666666;}

#menu ul li.nivel1e:hover
{background-color:#666666;}



/*COPA ROTAX ARGENTINA*/
#menu ul li.nivel1c
{ 
float: left;
width: 260px;
padding-left:20px;
position: relative;
display:block;
height:49px;
padding-right:10px;
padding-top:19px;
}

#menu ul li.nivel1d
{ 
margin-left:3px;
width:100px;
float: left;
position: relative;
display:block;
height:49px;
padding-top:19px;
}

#menu ul li.nivel1e
{ 
width:130px;
padding-right:24px;
float: left;
position: relative;
display:block;
height:49px;
padding-top:19px;
}

#menu ul li { float: left;}

#menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-weight:bold;
font-size:16px;
font-family:Helvetica, Arial, sans-serif;
padding: 8px;
position: relative;
}




#menu ul li a:hover, #menu ul li:hover a.nivel1 {
color: #fff;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}

/*DESPLEBAGLE*/

#menu ul li a:hover ul, #menu ul li:hover ul {
margin-top:13px;
display: block;
position: absolute;
width:1000px;
background-color:#000;
}

#menu ul li ul li a {
font-size:13px;
color:#fff;

}

#menu ul li ul li a:hover 
{
position: relative;
color:#fff;
background-color:#666666;
}

table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -182px;}
ul.tres {left: -452px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}
Graciias a todos!

saludos,
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar
  #2 (permalink)  
Antiguo 08/03/2011, 12:34
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: menú desplegable: funciona en firefox y chrome, pero no en explorer

El menú funciona correctamente en IE. El problema está en tu documento. No pasaría la validación del w3c. Puedes comprobarlo en http://validator.w3.org .
Tu HTML carece de la etiqueta <!DOCTYPE> que define el tipo de documento HTML.
Viéndolo sólo por encima, parece que puedas definir el documento como XHTML.
Puedes usar la siguiente cabecera :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
Si guardas el documento en una codificación diferente a utf-8 sustituye esa parte por el código que uses.
Creo que con eso pasaría la validación.
Si no es así puedes sustituir la primera etiqueta por esta otra:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
En este documento aparecen las DTD más habituales para cada tipo de documento HTML:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
  #3 (permalink)  
Antiguo 08/03/2011, 19:10
Avatar de arielcasanova  
Fecha de Ingreso: octubre-2004
Ubicación: Bahía Blanca - Argentina
Mensajes: 332
Antigüedad: 19 años, 6 meses
Puntos: 1
Respuesta: menú desplegable: funciona en firefox y chrome, pero no en explorer

sanxuan: genio total. muchas gracias. al final, era taaan sencillo y yo volviéndome loco.
saludos,
__________________
Ariel Casanova
diseño y desarrollo web estratégico
www.emporia.com.ar

Etiquetas: chrome, desplegable, explorer, firefox
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 22:30.