hice el tuto que hay en esta misma pagina de menu desplegable con css y me encuentro con la sorpresa de que se ve malisimo en Iexplorer mientras que se ve correctamente en firefox... valla sorpresa
lastimosamente soy una simple y pequeñita aprendiz todavia, aun no se nada de los hacks especiales para que ese demonio lea bien mis css asi que recurro para que me asesoren plis ._.
codigos
Código HTML :
<ul> <li><main>Actualidad</main> <ul> <li><a>hola hola holaholagolaaa hola jajaj jaja jaa</a></li> <li><a>subopcion</a></li> <li><a>subopcion</a></li> </ul> <li><a>opciones</a> <ul> <li><a>subopcion</a></li> <li><a>subopcion</a></li> <li><a>subopcion</a></li> </ul> </li> <li><a>opcion</a></li> <li><a>opcion</a></li> <li><a>opcion</a></li> </ul>
css
Código :
ul { margin:0; /*AQUÍ DECIDIMOS QUE EL MENÚ TENGA UN MARGEN IGUAL A CERO CON LOS ELEMENTOS QUE TENGA ALREDEDOR*/ padding:0; /*AQUÍ DECIDIMOS QUE EL MENÚ TENGA UN MARGEN IGUAL A CERO CON LOS ELEMENTOS QUE TENGA EN SU INTERIOR*/ list-style:none; /*AQUÍ DECIDIMOS QUE EL MENÚ NO TENGA ASPECTO DE LISTA*/ } li { float: left; /*AQUÍ ALINEAMOS LAS OPCIONES A LA IZQUIERDA, LAS OTRAS DOSLINEAS SUPONGO QUE SE ENTIENDEN, SI NO LAS COPIAN Y PUNTO */ position: relative; margin:0; } li a { display:block; color: #666; text-decoration:none; width:120px; /*MEDIDAS QUE QUERAMOS QUE TENGA CADA "CASILLA" DE OPCION*/ height:auto; text-align:center; font-size:11px; font-weight:bold; background-color:#fff; /*AQUÍ PODEMOS DEFINIR LAS OPCIONES DEL FONDO DE LAS OPCIONES, IGUAL QUE HE DEFINIDO EL COLOR, PODEMOS PONER UNA IMÁGEN...*/ border:4px solid #fffff; } li main { display:block; color: #fff; text-decoration:none; padding:3px 0 0 0; width:140px; /*MEDIDAS QUE QUERAMOS QUE TENGA CADA "CASILLA" DE OPCION*/ height:32px; text-align:center; font-size:11px; font-weight:bold; background: url(blank.gif); /*AQUÍ PODEMOS DEFINIR LAS OPCIONES DEL FONDO DE LAS OPCIONES, IGUAL QUE HE DEFINIDO EL COLOR, PODEMOS PONER UNA IMÁGEN...*/ } li main:hover { display:block; color: #fff; text-decoration:none; width:140px; /*MEDIDAS QUE QUERAMOS QUE TENGA CADA "CASILLA" DE OPCION*/ height:32px; text-align:center; font-size:11px; font-weight:bold; background: url(blank_over.gif); /*AQUÍ PODEMOS DEFINIR LAS OPCIONES DEL FONDO DE LAS OPCIONES, IGUAL QUE HE DEFINIDO EL COLOR, PODEMOS PONER UNA IMÁGEN...*/ } li a:hover { /*AQUÍ LO QUE HACEMOS ES LO MISMO QUE EN EL APARTADO ANTERIOR, SOLO QUE EN ESTA OCASIÓN DEFINIMOS LOS ESTILOS PARA QUE CAMBIE EL ASPECTO CUANDO TENGAMOS EL RATON ENCIMA DE LA OPCION*/ color:#fff; text-decoration:none; font-weight:bold; width:120px; height:auto; background-color:#009deb; } li ul { /*AQUÍ DEFINIREMOS VAROS PARÁMETROS DE LOS SUBMENÚS, EN CONCRETO DE LA APERTURA, QUE NO SE DEBE VER EN PRINCIPIO, Y POR ESO PONEMOS DISPLAY:NONE*/ display:none; position: absolute; left:0; } li>ul { /*LAS POSICIONES DE LAS OPCIONES DEL SUBMENU*/ top:auto; left:auto; } li:hover ul, li.over ul { display:block; /*FORMA EN LA QUE QUEREMOS QUE SALGA EL SUBMENU*/ }
link para previsualizar la pagina
pagina css D: