CSS Dropdowns not working in IE8 Compatibility Mode

Hello,

I am having a problem with my site in IE8 Compatibility mode. Below is a URL where you get the basic idea of what my websites dropdowns look like. The dropdowns are done in CSS and when you hover over one dropdown the submenu for the dropdown expands under the dropdown to the right of it. It works correctly in Safari, Chrome, Firefox, and normal IE8. But when you go to compatibility mode it isn’t working correctly. Any help would be much appreciated.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

Thanks

Hi,

Make sure you have a full valid doctype or IE will struggle with this anyway.

The main problem with IE6 and 7 is that they don’t like auto positions for absolute elements so you need to use top:30px and left:0 instead of auto.

IE6 isn’t working because you omitted the sfhover javascript and it needs that to work plus you have the sfhover rules incorrect anyway :slight_smile: IE6 doesn’t understand the child selector either so lose that as its not needed here anyway.

Most of your classes are redundant as they can be handled via context and aren’t really needed.

You can’t use the same id twice as ids must be unique and indeed a menu like that should be one list and not two separate lists. It will fail in IE6 if you use two lists anyway because the javascript will only find one of the ids and not the other.

A table is not necessary for a dropdown menu and indeed complicates the whole process. The button element doesn’t really seem the right element to use here either.

Here is the code tidied up and working from ie6 upwards.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("cssdropdown").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style type="text/css">
/*###### Start Menu CSS ######*/
p {
    margin:0
}
#cssdropdown, #cssdropdown ul {
    padding:0;
    margin: 0;
    list-style: none;
    z-index:999;
}
#cssdropdown li {
    float: left;
    position: relative;
    z-index:999;
}
#cssdropdown li ul {
    top: 30px;
    position: absolute;
    margin: 0px;
    padding: 2px;
    width:15em;
    left: -999em;
    border-left:solid #000000 1px;
    background:#600;
}
#cssdropdown li:hover ul, #cssdropdown li:focus ul, #cssdropdown li.sfhover ul {
    left: 0;
}
/* Root link formatting */
#cssdropdown li a {
    display: block;
    padding-right: 0px;
    text-decoration: none;
    font-weight:bold;
    color: #FDED8F;
}
#cssdropdown li a:hover {
    color: black;
    font-size: 9pt;
}
/* Menu link formatting */
#cssdropdown li li {
    float:left;
    clear:left;
    width:100%
}
#cssdropdown li li a {
    display: block;
    margin: 0;
    padding:3px 3px 3px 6px;
    background: #600;
    font-weight: normal;
    font-size: 9pt;
    color: white;
    position:relative;
}
/* Menu link hover formatting */
#cssdropdown li li a:hover {
    display: block;
    background: #900;
    color: white;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
    clear: left;
}
/*###### End Menu CSS ######*/

#cssdropdown li p,#cssdropdown li p a {
    background: url(http://www.freewebsitebuttons.com/action_buttons/buy_orange.jpg) 0 0 no-repeat;
    height:30px;
    width:232px;
    border: none;
    padding: 0;
}
#cssdropdown li p {background: url(http://www.freewebsitebuttons.com/action_buttons/buy_now.jpg) 0 0 no-repeat;}
#cssdropdown li p a a:hover {background:transparent;}
</style>
</head>
<body>
<ul id="cssdropdown">
    <li>
        <p><a href="#" ></a></p>
        <ul>
            <li><a href="/article/test.aspx">Test Dropdown 1</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 2</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 3</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 4</a></li>
        </ul>
    </li>
    <li>
        <p><a href="#"></a></p>
        <ul>
            <li><a href="/article/test.aspx">Test Dropdown 1</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 2</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 3</a></li>
            <li><a href="/article/test.aspx">Test Dropdown 4</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>



Hope that helps:)

Paul - Thanks for your help with this. Your code fixed the problem I was having. I have put in in the below jsfiddle.

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)