Problemas con Menu acordeon en IE

Hola que tal un saludo!!!!
Paseando por los foros me encontré con algo muy interesante: Un menu acordeon con css pero que lamentablemente no lo he podido hacer funcionar en IE...(si, si es cierto!! necesito estudiar mucho sobre CSS y lo haré (lo estoy haciendo sin duda) pero aún no puedo resolver esto).

Aporte de xRoa

Código :

<style type="text/css">
#menuBox{
width:200px;
height:100%;
border:1px solid #999;
border-bottom:0;
background:#CCCCCC;
}
#menuBox ul{
list-style:none;
margin:0px;
padding:0px;
}
#menuBox ul li{
border-bottom:1px solid #999; 
}
#menuBox ul li a{
text-decoration:none;
color:#000;
display:block;
padding:10px;
}
#menuBox ul li ul{
display:none;
}
#menuBox ul li:hover ul{
background:#FFF;
display:block;
}
</style>

-------

<div id=\"menuBox\">
<ul>
  <li><a href=\"#\">Menu 1</a>
    <ul>
      <li><a href=\"#\">Submenu 1-1 </a></li>
      <li><a href=\"#\">Submenu 1-2 </a></li>
      <li><a href=\"#\">Submenu 1-3 </a></li>
    </ul>
  </li>
  <li><a href=\"#\">Menu 2</a>
    <ul>
      <li><a href=\"#\">Submenu 2-1</a></li>
      <li><a href=\"#\">Submenu 2-2</a></li>
    </ul>
  </li>
  <li><a href=\"#\">Menu 3</a>
    <ul>
      <li><a href=\"#\">Submenu 3-1</a></li>
    </ul>
  </li>
</ul>
</div>

Así que si alguien puede echarme una mano, de verdad he visitado muchos lugares pero no encuentro una respuesta... Por su función este menu me ha gustado, a veces he empezado a creer que mi solución sería un fla, pero me ha entrado la \"espinita\" de resolverlo con CSS.... pero no puedo !!!

Y otra vez, si alguien puede mostrarme la luz... estaría muy, muy agradecido, de todas formas le sigo trabajando haber que sale...

Gracias y hasta luego!!!

etzekiel escribió:

El evento hover, sobre cualquier cosa que no sea un enlace, no funciona en IE.
Necesitas añadir unas pocas líneas de javascript... (unas 10)
En este tutorial, sobre "un menú desplegable", encontrarás el javascript en cuestión.
No será difícil adaptarlo, pues el principio, es el mismo: cambiar la clase, del elemento por el que pases por encima con el ratón.

** el script en cuestión, es este:

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;

Pero te repito, te cmbiene leer el manual entero.

Hola rizome muchas gracias por el tip... sin duda leeré el link que me diste, es invaluable tu comentario.... un saludo!!!!