Menú desplegable desplegable de CSS en Internet Explorer

Intentar crear un sitio web que se vea tan bien en Internet Explorer como lo hace en Firefox es una tarea increíblemente difícil. Sin embargo, hay al menos un error en IE que es particularmente desconcertante para nuestro equipo. El menú desplegable se muestra bien en Firefox y Chrome, pero se ve completamente golpeado en el Explorador.

Esta imagen muestra el aspecto del menú mientras navegas en Firefox y Explorer, respectivamente. Por favor, haga clic en el enlace para ver la imagen.

http://sofes.miximages.com/html/firefox-explorerscreenshot.png

¡Por favor ayuda! ¿Alguien más ha tenido este problema al intentar usar un menú formateado en CSS? El menú usa listas desordenadas y elementos de la lista, y usa el control deslizante de CSS para mostrar los contenidos del submenú.

¡Gracias por adelantado!

ACTUALIZACIÓN: Por alguna razón, el menú funcionó por sí solo en IE, pero todavía no funciona en nuestro sitio. Misterioso…

Aquí está el código.

El html sigue:

      

y aquí está el CSS:

 #topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;} #topDropDownMenu li ul { width:11em !important;/* leaves room for padding */ cursor:default; position:absolute; height:auto; display:none; left:-10px; padding:1px 10px 10px 10px; background:url(/img/clear.gif); } /* All LIs */ #topDropDownMenu li { position:relative; width:8.3em; max-width:16.5%; cursor:pointer; float:left; list-style-type:none; font-weight:bold; border-style:solid; border-width:1px; border-color:#222; text-align:center; -moz-border-radius:8px 8px 0px 0px; } /* sub-menu LIs */ #topDropDownMenu li ul li { width:8.3em/*FF*/; padding:0; border:none; max-width:100%; border:1px solid #333; border-top:none; -moz-border-radius:0px 0px 0px 0px; } /* All anchors */ #topDropDownMenu li a { cursor:pointer !important; color:#666; text-decoration:none; display:block; float:left; height:2em; line-height:2em; width:100%; -moz-border-radius:8px 8px 0px 0px; } /* sub-menu Anchors */ #topDropDownMenu li ul li a { width:8.3em/*FF*/; position:relative !important; cursor:pointer !important; white-space:nowrap; line-height:1.7em; height:1.7em; font-weight:normal; color:#666; background-position:0 50% !important; -moz-border-radius:0px 0px 0px 0px; } /*hover*/ #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active {color:#000;background:#fff} /* display and z-index for the sub-menus */ #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;} #topDropDownMenu li#aboutDropDown {z-index:2;} #topDropDownMenu li#contactDropDown {z-index:1;} .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul { display:block;top:-1000px} #aboutDropDown a {background-color:#b9e075;} #contactDropDown a {background-color:#f7c472;} #topDropDownMenu li.msieFix a {} .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {position:absolute !important;top:1028px !important;} 

Sin ver algo de HTML y CSS, no hay forma de darle una solución específica. Sin embargo, hay algunas técnicas que se pueden utilizar para ayudar a aliviar los errores de IE.

  • Flota tus
  • s, incluso si no son horizontales.

  • Agregar display: inline a los
  • ahora flotados.

  • Asigna un width a tu
  • s o a la etiqueta dentro de.

  • Potencialmente agregar position: relative a los
  • s.

  • Agregar display: block las tags dentro de los
  • s.

  • Agregue width: 100% o zoom: 1 (o cualquier otra cosa que desencadene hasLayout) al nivel superior

      .

    Algunas de las técnicas anteriores usualmente lo colocarán en una mejor posición. Pueden ser necesarios otros ajustes, pero es de esperar que IE se comporte mejor.

    También me encanta codificar todo, pero HTML / CSS / JS Navigation es una de esas áreas en las que realmente no necesitas reinventar la rueda. No importa lo que quiera que parezca, hay un montón de soluciones listas para usar que ya se probaron en el navegador cruzado. Suckerfish es popular para una solución pura de html / css, pero hay muchos más que funcionarán bien y se diseñarán fácilmente para que se vean como quieras. (Solo asegúrese de diseñar los elementos correctos)

     < !doctype html>    Untitled Document        

    Esto apenas cuenta como una respuesta, pero puede ayudar.

    La compatibilidad con navegadores cruzados puede ser un poco monstruosa para cosas como esta cuando se usa una solución completamente personalizada. Esta es una instancia en la que el uso de una biblioteca como jquery UI hará las cosas mucho más fáciles para usted, ya que normalmente ya son compatibles con navegadores cruzados.

    Si esta no es una opción, será imposible ayudar sin ver su código. ¿Con qué versión de Internet Explorer está probando?