compatibilidad css con iexplorer

de vuelta al demonio

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:

Hola Neilye
¿De qué ie hablamos?

Bueno, te comento. En tu html veo unos errores (supongo que son de transcripción). Te lo resalto en forma de comentarios:

Código HTML :

  <ul>  
      <li><a class="main" href="#">Actualidad</a> <!-- Tú tienes: <li><main>Actualidad</main>  -->
          <ul>    
              <li><a href="#">hola hola holaholagolaaa hola jajaj jaja jaa</a></li>    
              <li><a href="#">subopcion</a></li> 
              <li><a href="#">subopcion</a></li> 
          </ul>
      </li> <!-- este cierre del li no está -->   
      <li><a href="#">opciones</a>

Y en el css tienes: li main {...} cuando debería ser:

Código :

li.main { ... }

Y en la última regla de tu css falta una "h" en: li:hover ul, li.hover ul

Tus códigos no funcionarán en ie6, entre otras razones porque ese engendro sólo acepta la pseudoclase hover sobre los enlaces (y como dentro de un enlace no puede haber otros elementos como listas...)

Mira éste ejemplo, creo que es el tipo de menú que estás buscando. Fíjate en el uso de los comentarios condicionales para que funcione en ie6.
Sólo es cuestión de que adaptes la parte estética a lo que necesitas.

Saludos

si, tenia varios errores, muchos los habia corregido ya pero gracias por la correccion, gracias a ti ahora se ve mejor.

ie= internet explorer 7

pero los problemas continuan... el menu se desplaza al boton siguiente haciendo imposible seleccionar algun item de la lista.

aqui de nuevo D:

si la miran en internet explorer y otro navegador notaran inmediatamente la diferencia

Elimina esta declaración:

Código :

li>ul { /*LAS POSICIONES DE LAS OPCIONES DEL SUBMENU*/
   top:auto;
   left:auto;
   }

y deja la siguiente como sigue:

Código :

li:hover ul { 
   display:block;   /*FORMA EN LA QUE QUEREMOS QUE SALGA EL SUBMENU*/
   left:0;
   top:32px;
   z-index:50;
   }

Y aplica las correcciones indicadas en el anterior comentario, pues veo que el código sigue igual.
Ya comentarás qué tal.
Pero sigo recomendándote que cambies tus códigos por el menú que te enlazaba, entre otras cuestiones porque a tus usuarios de ie6 no les funcionará el menú.

Saludos

listo ya dio wiii muchas gracias