CSS drop-down menu explosion in Internet Explorer 7

Question

I am creating a design with a drop-down menu and everything works well in modern browsers (i.e. Firefox, Chrome, Opera, Safari, and IE9). However, due to to the number of visitors using IE7 and IE8, I also need to make the menu compatible with those versions of Internet Explorer.

Here is the drop-down menu (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;
}

Screenshot in IE7 and IE8

I have tested the backward compatibility in IE Developer Tools:

• IE7: The <ul> lists are displaced and navigation is impossible
• IE8: Only missing round corners (this is a minor problem)

I tried to modify the style as advised in this answer, but not successfully.

So, does anybody have any idea how to fix these issues?

Answer 1

Overall, your issue is that the CSS you are using is more advanced than some of the browsers you need to support. Rounded corners and most pseudo elements have spotty support in older browsers.

I noticed that your arrow is missing in IE7, that was my clue. IE7 does not support the pseudo-class element :after. Here is a helpful reference page to check on browser support of certain CSS http://kimblim.dk/css-tests/selectors/.

Quirksmode.org is a good resource for compatibility. Here is there page specific to :after http://www.quirksmode.org/css/beforeafter.html