Foros del Web » Creando para Internet » CSS »

Menu css despliega mal en ie

Estas en el tema de Menu css despliega mal en ie en el foro de CSS en Foros del Web. Buenas! ya se que hay que cambiar el "li.hover li" por "li.hover li, li.over li" para que funcione en IE, y tambien el codigo en ...
  #1 (permalink)  
Antiguo 17/09/2009, 08:26
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Menu css despliega mal en ie

Buenas! ya se que hay que cambiar el "li.hover li" por "li.hover li, li.over li" para que funcione en IE, y tambien el codigo en javascript y el <ul id="nav">, pero al principio me desplegaba el menu como si fuera lineal (inline creo que se dice no?) y solo podia pasar el mouse por enciam de la primera linea (Son 3 porque son muchas opciones) despues cuando logre que sea desplegable hacia abajo (Como debia ser de entreada) me dejaba un terrible espacio entre una opcion y otra, cuando queria pasar a la segunda opcion se me cerraba el menu.

entonces ya no se que hacer, les dejo los dos pares de codigo (Los originales sin las modificaciones para ie [css, html] y los modificados para ie[css, html])

No Modificados
Css
Código:
@charset "utf-8";

body{
width:80%;
margin: 0 auto;


scrollbar-3dlight-color : #82BCDA;
scrollbar-darkshadow-color : #82BCDA;
scrollbar-highlight-color : #D7ECF5;
scrollbar-shadow-color : #3985AB;
scrollbar-arrow-color : #0E212A;
scrollbar-face-color : #82BCDA;
scrollbar-track-color : #82BCDA;


}


.contenedor{
margin: 0 auto;
margin-left:10%;
margin-right:auto;
width:80%;

}

#cabecera{
background-image:url(digital2.jpg);
background-repeat:no-repeat;
background-position:center;
border-style:solid;
border-width:1px;
border-color:#000000;
margin: 0 auto;
width:80%;
height:100px;
}

#digitalglobe{
text-align:left;
color:#666666;
font-size:18px;
margin-top:25px;
margin-left:80px;
}

#fecha{
text-align:right;
color:#666666;
font-size:18px;
margin-top:-40px;
}


/*Aca le doy estilo a todo lo que este contenido dentro de la primer etiqueta UL*/
ul {
font-family: Arial, Verdana;
font-size: 17px;
margin:0;
padding:0;
list-style: none;
}

/*Aca les doy el estilo todas las etiquetas LI dentro de UL*/
ul li {
font-size: 17px;
margin:0;
padding:0;
display: block;
position: relative;
float:left;

}

/*Aca mantengo ocultos los menues desplegables*/
li ul {
display: none;
font-size: 17px;
position:absolute;
 
}

/*Aca le doy estilo a los href en las listas li*/
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;

}

/*Aca le doy estilo a los href cuando pasa el mouse por encima del link*/
ul li a:hover { 
background:#FF0066; 

}

/*Aca le doy estilo aL despliegue de los botones*/
li:hover ul {
  display: block;
  
}


/*Aca le doy estilo a los botones*/
li:hover li {
  float: none;
  font-size: 15px;

  
}

li:hover a {
background: #617F8A;

}

/*Aca le doy estilo a los botones cuando paso el mouse por encima*/
li:hover li a:hover {
background:#00FF00;
}

#index{
width:80%;
margin: 12 auto;
border-style:solid;
border-width:1px;
border-color:#000000;

}

.alta_news
{color:#006666;
text-align:center;
}

.alta_news a{
text-decoration:none;
color:#0066FF;

}


button.enviar{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}

button.cancelar{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}

button.reestablecer{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}

Html
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see ">
<title></title>

<style type="text/css">
 li.c1 {list-style: none; display: inline}
</style>
</head>
<body>
<ul>
<li><a href="ofertas.php">Ofertas</a></li>
<li><a href="#">Nuestros Productos</a>
<ul>
<li><a href="">Micros</a></li>
<li><a href="">Mothers</a></li>
<li><a href="">Memorias</a></li>
<li><a href="">Pendrives</a></li>
<li><a href="">Discos</a></li>
<li><a href="">Cd/Dvd/Disk</a></li>
<li><a href="">Notebooks</a></li>
<li><a href="">Gabinetes</a></li>
<li><a href="">Fuentes</a></li>
<li><a href="">Teclados</a></li>
<li><a href="">Parlantes</a></li>
<li><a href="">Monitores</a></li>
<li><a href="">Placas de Video</a></li>
<li><a href="">Web Cams</a></li>
<li><a href="">Impresoras</a></li>
<li><a href="">Conectividad</a></li>
<li><a href="">Placas de Sonido</a></li>
<li><a href="">Consolas</a></li>
<li><a href="">Joysticks</a></li>
<li><a href="">Auriculares</a></li>
<li><a href="">Mouses</a></li>
<li><a href="">Proyectores</a></li>
<li><a href="">Camaras Digitales</a></li>
<li><a href="">Lector/Memorias</a></li>
<li><a href="">Mp3/Mp4</a></li>
<li><a href="">Gps</a></li>
</ul>
</li>
<li><a href="index.php">Sobre Nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Newsletter</a>
<ul>
<li><a href="news_alta.php">Alta</a></li>
<li><a href="news_baja.php">Baja</a></li>
</ul>
</li>
<li><a href="#">Formas de Pago</a></li>
</ul>
</body>
</html>
Modificados
Css
todo igual pero en donde esta el
Código:
li:hover ul
le puse
Código:
li:hover ul, li.over ul
.

Html
donde esta el
Código:
<ul>
le puse
Código:
<ul id="nav">
.

y agregue este javascript en el head (Como debe ser xD )
Código:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;



Y no funciona :S me despliega mal! como lo mencione arriba!

alguien tiene idea de porque pasa eso? Gracias!

Última edición por kadas99; 17/09/2009 a las 08:37
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 11:03.