Foros del Web » Creando para Internet » CSS »

Menú desplegable descuadrado en IE

Estas en el tema de Menú desplegable descuadrado en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/06/2008, 08:37
 
Fecha de Ingreso: junio-2008
Mensajes: 14
Antigüedad: 15 años, 9 meses
Puntos: 0
Menú desplegable descuadrado en IE

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;    
    
overflowhidden;
}

#ozMenu ul {    
    
displaynone;    
}

#ozMenu ul.menu {
    
font-familyGenevaArialHelveticasans-serif;
    
font-size12px;
    list-
stylenone;
    
floatleft;
    
margin0px 0px 0px 0px;
    
padding-left5px;
    
padding-right5px;
    
padding-top2px;
    
padding-bottom2px;
    
displayblock;
}

#ozMenu li.menuOut {
    
padding-left20px;
    
padding-right20px;
    
padding-top2px;
    
padding-bottom2px;
    
border1px solid #CCCCCC;
    
cursor: default;
}

#ozMenu li.menuHover {
    
padding-left20px;
    
padding-right20px;
    
padding-top2px;
    
padding-bottom2px;
    
background-color#FFFF99;
    
border1px solid #FF0000;
    
overflowhidden;
    
cursor: default;
}

#ozMenu ul.subMenu {    
    
displaynone;
}

#ozMenu ul.subMenuHover {    
    
positionabsolute;
    
background-color#FFFF99;
    
margin-bottom0px;
    
margin-left: -21px/* según el padding-left del menú */
    
margin-right0px;
    
margin-top2px/* según el paddin-bottom del menú */
    
list-stylenone;
    
padding5px 25px 5px 20px;
    
border1px solid #FF0000;
    
line-height18px;
    
displayblock;

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
  #2 (permalink)  
Antiguo 25/06/2008, 16:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Menú desplegable descuadrado en IE

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:59.