Drop Down not even showing up in IE6

Question

I've got a drop down menu here that just plain won't show up in IE6. The site works perfectly in every other browser. Seems daft to lose sleep over IE6, I know, but the site is for a demographic who could very well still be using it.

Here's the CSS:

html {
    height:100%;
}

body, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}

body {
    behavior:url("csshover3.htc");
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#d3d3d3;
    height:100%;
}

h1 {
    font-size:18px;
    color:#752eca;
    text-decoration:none;
}

h2 {
    font-size:14px;
    color:#909090;
    text-decoration:none!important;
}

p {
    text-indent:20px;
    color:#000;
}

p a {
    color:#000;
    text-decoration:underline;
}

p.foot {
    text-indent:0px;
}

p.link {
    font-size:18px;
    color:#30F;
    text-decoration:underline!important;
}

a {
    color:#4d2288;
    text-decoration:none;
    outline:none;
}

a:visited {
    color:#4d2288;
}

p a:hover {
    text-decoration:underline!important;
}

ul#nav {
    padding:5px;
    margin:0px auto;
    width:100%;
}

ul#nav li a {
    display:block;
    font-weight:bold;
    padding:2px 10px;
    background:#bacddb;
}

ul#nav li a:hover {
    background:#888;
    color:#fff;
}

li {
    list-style:none;
    float:left;
    position:relative;
    width:225px;
    text-align:center;
    margin:0px auto;
    margin-right:4px;
    border:1px solid #4d2288;
}

li ul {
    display:none;
    position:relative;
    width:auto;
    top:0;
    left:0;
    margin-left:-1px;
}

li>ul {
    top:auto;
    left:auto;
    border-top:none;
}

li:hover ul, li.over ul {
    display:block;
}

ul#nav li.current a {
    background:#b8ab28;
}

ul#nav li.current a:hover {
    background:#888;
}

img {
    margin:10px 0 5px;
}

*html img {
    margin:20px;
}

.coltextimg {
    position:relative;
    float:left;
    background-position:left bottom;
    padding:0px 20px 10px 0px;
    border:none;
}

#maincontent {
    width:940px;
    margin:0px auto;
    postition:absolute;
}

*html #maincontent {
    margin-left:42px;
}

#header {
    float:left;
    width:100%;
    height:auto!important;
    height:100%;
    min-height:100%;
    margin:0px auto;
    background-image:url(images/banner_test.jpg);
    background-repeat:no-repeat;
    border:2px solid #752eca;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.colmask {
    position:relative;
    margin-top:160px;
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
}

.colright,
.colmid {
    float:left;
    width:100%;
    position:relative;
}

.col1,
.col2 {
    float:left;
    position:relative;
    padding:10px 0 1em 0;
    overflow:hidden;
}

.twocol {
    background:#fff;
}

.twocol .colmid {
    right:45%;
    background:#fff;
}

.twocol .col1 {
    width:51%;
    left:47%;
    text-align:justify;
    z-index:0;
}

.twocol .col2 {
    width:41%;
    left:51%;
    text-align:justify;
    z-index:0;
}

.twocol .colimg {
    border:2px solid #a0a0a0;
}

.twocol .colvid1 {
    width:360px;
    height:240px;
}

.twocol .colvid2 {
    width:360px;
    height:240px;
}

#footer {
    text-align:center;
    font-size:9px;
    padding:10px 0 1em 0;
    clear:both;
    width:100%;
    height:100%;
}

*html #footer {
    height:43px;
}

#footer p a {
    text-decoration:none;
}

#lyr_ddmenu {
    position:absolute;
    z-index:1;
    height:10px;
    top:120px;
    float:left;
    width:1000px;
    margin:0px auto;
    padding:5px;
}

#contact {
    position:absolute;
    float:right;
    font-size:10px;
}

A.Controls:link {
    color:#666666;
    text-decoration:none;
    font-weight:bold;
}

A.Controls:visited {
    color:#666666;
    text-decoration:none; 
    font-weight:bold;
}

A.Controls:active {
    color:#666666;
    text-decoration:none;
    font-weight:bold;
}

A.Controls:hover {
    color:#be0000;
    text-decoration:none;
    font-weight:bold;
}

And here's the html I'm having the specific problem with:

<div id="maincontent">
<div id="header">
    <div id="lyr_ddmenu">
        <ul id="nav">
            <li class="current"><href here...</a>
        <ul class="sub">
            <li><href here...</a></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
        </ul></li>
            <li><href here...</a></li>
        <ul class="sub">
            <li><href here...</a></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
        </ul></li>
            <li><href here...</a></li>
            <li><href here...</a></li>
        <ul class="sub">
            <li><href here...</a></li>
        </ul></li>
        </ul>
</div>

Thanks!

Answer 1

IE6 does not support the :hover pseudo-class for all elements, only a tags, so the following rule will not get applied in IE6:

li:hover ul, li.over ul {
    display:block;
}

It looks like your menus are designed to use Javascript to emulate :hover by adding the class over to the li elements using the mouseover functions, so you'll need to post any Javascript before anyone can diagnose what's going on in IE6.

Just on the off chance that this might help, you can use the Whatever:hover script to emulate this behavior in IE6.

Answer 2

1) Remove behavior:url("csshover3.htc"); from the body

2) Add this to the bottom (better replacement of the .htc)

* html li { scrollbar-face-color: expression(runtimeStyle.scrollbarFaceColor = '#fff', onmouseover = function() {this.className += ' hover'}, onmouseout = function() {this.className = this.className.replace(/ hover/g, '')} ); }
    li.hover ul { display:block; } /* (li:hover) */

3) Should work.

---

or try to separate

li:hover ul { display:block; }
li.over ul { display:block; }

---

You can also use jQuery to handle :hover

jQuery(function($) {
    $("li").bind('mouseover mouseout',function(){$(this).toggleClass('hover')});
});

play around .hover class:

li.hover ul { _display: block; } /* Styles for IE6 */