Menu css despliega mal en ie

kadas99 · #1 (**permalink**) 17/09/2009, 07:26

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!