html - menus - Explosión del menú desplegable de CSS en Internet Explorer 7

menu simple css

Question

Estoy creando un diseño con un menú desplegable y todo funciona bien en los navegadores modernos (es decir, Firefox, Chrome, Opera, Safari e IE9). Sin embargo, debido a la cantidad de visitantes que usan IE7 e IE8, también necesito hacer que el menú sea compatible con esas versiones de Internet Explorer.

Aquí está el menú desplegable ( fiddle , pastebin ):

HTML

<ul class="menu_top">
    <li><a href="/" title="Home" class="selected">Home</a></li>
    <li><a href="/Help_Videos" title="Help Videos" class="haschildren">Help Videos</a><ul>
        <li><a href="/Child_Page" title="Child Page">Child Page</a></li>
        <li><a href="/Site_Map" title="Site Map" class="haschildren">Site Map</a><ul>
            <li><a href="/Galleries" title="Galleries">Galleries</a></li>
            <li><a href="/Missing" title="Missing">Missing</a></li></ul>
        </li></ul>
    </li>
    <li><a href="/About" title="About" class="haschildren">About</a><ul>
        <li><a href="/Contact" title="Contact">Contact</a></li></ul>
    </li>
</ul>

CSS

ul.menu_top {
    float:left;
    width:70%;
    margin: 8px 100px 0 0;
    border-radius:4px;
    background-color: #c4092a;
    list-style-type: none;
    z-index:+1;
}
ul.menu_top li {
    float: left;
    position: relative;
    margin: 4px 2em 4px 4px;
    padding: 0;
}
ul.menu_top li ul {
    visibility: hidden;
    position: absolute;
    top:100%;
    left:0;
    padding:0.5em;
    list-style-type: none;
    white-space:nowrap;
    background-color: #c4092a;
    border: 1px solid white;
    border-radius:4px;
    z-index:+1;
}
ul.menu_top li:hover > ul {
    visibility: visible;
    z-index: +2;
}
ul.menu_top li ul li {
    padding: 0;
    margin: 12px 4px;
    float:none;
    border:0;
    min-width:3em;
}
ul.menu_top li ul li ul {
    top:0;
    left:99%;
}
ul.menu_top a {
    background-color:#c4092a;
    color:white;
    text-decoration:none;
    padding:4px;
    font-size:18px
}
ul.menu_top a:hover,
ul.menu_top a.haschildren.childselected,
ul.menu_top a.selected {
    background-color:white;
    color:blue;
    text-decoration:none;
}
ul.menu_top li a.haschildren:after {
    content: "/00A0/00A0/25BC";
}
a {
    color:#0000aa;
    background-color:inherit;
}

Captura de pantalla en IE7 e IE8

He probado la compatibilidad con versiones anteriores en IE Developer Tools:

• IE7: las listas <ul> están desplazadas y la navegación es imposible
• IE8: solo faltan esquinas redondeadas (este es un problema menor)

Traté de modificar el estilo como se aconseja en esta respuesta , pero no con éxito.

Entonces, ¿alguien tiene alguna idea de cómo solucionar estos problemas?

Answer 1

En general, su problema es que el CSS que está usando es más avanzado que algunos de los navegadores que necesita. Las esquinas redondeadas y la mayoría de los pseudo elementos tienen soporte irregular en navegadores antiguos.

Me di cuenta de que su flecha falta en IE7, esa fue mi clave. IE7 no admite el elemento de pseudo clase: después. Aquí hay una página de referencia útil para verificar el soporte del navegador de ciertos CSS http://kimblim.dk/css-tests/selectors/ .

Quirksmode.org es un buen recurso para la compatibilidad. Aquí hay una página específica para: después de http://www.quirksmode.org/css/beforeafter.html