menu desplegable en FF y en IE

wenas a todos, estoy haciendo una web en CSS y he creado un menu desplegable que en FF funciona perfectamente pero que IE explorer no lo reconoce y no lo abre, lo que me gustaria saber es que tengo que hacer para que en IE aparezca tb. El menu esta echo usando listas, aqui dejo el CSS que pertenece al menu:

Código :

/* Menu */
#menu {
   z-index:1;
   position: absolute;
   margin-left:0px;
}

#menu ul {
   padding:0px;
   margin:0px;
}

#menu li {
   list-style-type:none;
   float:left;
}

#menu li a {
   display:block;
   width:102px;
   padding:1px;
   text-decoration:none;
   text-align:center;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#CCDFE7;
   background-color:#0D688F;
   border-left:8px solid #0F92C7;
   font-weight: bold;
}

#menu li a:hover {
   background-color:#005B7B;
   border-left-color:#0E77A5;
}

#menu li ul {
   display:none;
   margin:0px;
   padding:0px;
}

#menu li:hover ul {
   display:block;
}

#menu li:hover ul li {
   float:none;
}

#menu li:hover ul li a {
   width:99px;
   padding:5px 0px 5px 5px;
   font-size:11px;
   text-align:left;
}

/* Menu */

Que tendria que modificar para que funcione tb en IE ?

IE6 en inferiores no reconocen los selectores que no esten aplicados en un elemento a y para desplegar menus tu usas li:hover cierto? la unica forma de emular este comportamiento es con javascript:

Código :

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
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;

Entonces en tu CSS debes cambiar esta linea:

Código :

#menu li:hover ul, #menu li.over ul {

ves que ahora la clase over funcionara para IE. Es un método muy explicado en la red y muy muy común, asi que para más detalles aquí tienes el enlace . Al final de la página explica la parte de javascript.

Suerte[/url]

Pues aquí funciona sin usar JavaScript.

Pues mejor aun, pero a veces no es tan facil hacerlo funcionar dentro de un diseño, sobretodo cuando se superpone sobre otros elementos, aun asi si lo consigues bien por ti .

PD: Recuerda dejar un poco de padding-bottom a la capa menu para que el rollout no sea tan directo, si no que tengan que alejar el raton un poco mas, a veces no es facil apuntar