Menú desplegable descuadrado en IE

[FatalError]

Hola a todos,

Estoy intentando programar un menú desplegable por mi mismo, pero ya sólo empezar IE me da problemas.

La base del menú es muy sencilla. Está hecha con viñetas:

Código PHP:

  <body>
<div id="ozMenu">
    <ul>
        <li>Menú 1
            <ul>
                <li>Opcion 1</li>
                <li>Opcion 2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>Menú 2</li>
    </ul>
    <ul>
        <li>Menú 3
            <ul>
                <li>Primer elemento</li>
                <li>Segundo elemento</li>
                <li>Tercer elemento</li>
            </ul>
        </li>
    </ul>
</div>
</body> 
   

Y aplico los estilos sobre ellas a partir de Javascript. El problema es que los estilos aplicados funcionan perfectamente en FF pero no en IE:

Firefox:



IExplorer:



Hoja de estilos:

Código PHP:

  #ozMenu {
    background-color: #CCCCCC;    
    overflow: hidden;
}
 
#ozMenu ul {    
    display: none;    
}
 
#ozMenu ul.menu {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    list-style: none;
    float: left;
    margin: 0px 0px 0px 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: block;
}
 
#ozMenu li.menuOut {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    border: 1px solid #CCCCCC;
    cursor: default;
}
 
#ozMenu li.menuHover {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FFFF99;
    border: 1px solid #FF0000;
    overflow: hidden;
    cursor: default;
}
 
#ozMenu ul.subMenu {    
    display: none;
}
 
#ozMenu ul.subMenuHover {    
    position: absolute;
    background-color: #FFFF99;
    margin-bottom: 0px;
    margin-left: -21px; /* según el padding-left del menú */
    margin-right: 0px;
    margin-top: 2px; /* según el paddin-bottom del menú */
    list-style: none;
    padding: 5px 25px 5px 20px;
    border: 1px solid #FF0000;
    line-height: 18px;
    display: block;
} 
   

Al primer "UL" se le asigna la clase "menu" y a sus nodos hijos "LI" la clase "menuOut".

Cuando pasamos el cursor sobre "LI" se despliega el submenú ("LI" pasa a clase "menuHover") asignando al "UL" (hijo de "LI") la clase "subMenuHover".

Código PHP:

  function expandSubMenu (liTag) {
    var ulTags = liTag.childNodes;
    for ( i in ulTags ) {
        if ( ulTags[i].nodeName == "UL" ) {
            ulTags[i].className = "subMenuHover";
            return;
        }
    }
}
 
function collapseSubMenu (liTag) {
    var ulTags = liTag.childNodes;
    for ( i in ulTags ) {
        if ( ulTags[i].nodeName == "UL" ) {
            ulTags[i].className = "subMenu";
            return;
        }
    }
}
 
function menuHover (event) {
    this.className = "menuHover";
    expandSubMenu (this);
}
 
function menuNormal (event) {
    this.className = "menuOut";
    collapseSubMenu (this);
}
 
function ozIniMenu () {
    //asignamos estilo inicial al menú y eventos
    var ulTags = document.getElementById("ozMenu").childNodes;
    for ( i in ulTags ) {
        if ( ulTags[i].nodeName == "UL" ) {
            ulTags[i].className = "menu";
            var liTags = ulTags[i].childNodes;
            for ( e in liTags ) {
                if ( liTags[e].nodeName == "LI" ) {
                    liTags[e].className = "menuOut";
                    liTags[e].onmouseover = menuHover;
                    liTags[e].onmouseout = menuNormal;
                }
            }
        }
    }
} 
   

A alguien se le ocurre algo? Gracias

[kseso?]

Hola FatalError
Estos últimos días Mikmoro ha estado publicando unos cuantos menús, y los tiene recopilados en las faq´s , los nº #70 y #71.
Creo que encontrarás lo que buscas.