what to do with IE6 not supporting something:hover

Hi folks –

I’ve inherited a CSS-based single-level drop down menu. It works in FF, NS and IE7 but not in IE6. That is, the drop-down stuff doesn’t appear when you hover over the main category.

I’ve tracked the problem down to IE6 not supporting :hover unless it’s a:hover. It looks like the original designer may have tried a javascript patch, since I see a repeat declaration of the affected CSS rule.

Problem: I’ve also tracked down that a referenced javascript.js file is missing.

Question: What would be in that javascript file? I’ve tried the suckerfish thing, and it doesn’t work plus breaks FF, NS and IE7. It could be I don’t understand where to put what and just need more exact directions.

Here is a snippet of the calling HTML/CSS (the main menu):
<div id=”navMain”>
<ul>
<li><a href=”about/index.html”>About Us</a>
<ul>
<li><a href=”about/mission-goals.html”>Mission and Goals</a></li>
<li><a href=”about/history.html”>History</a></li>
</ul>
</li>
</ul>
</div>

… and here are the associated CSS rules (the very last one is the problem, see the duplicate declaration of “div#navMain li.over ul”, in which I suspect the “li.over” is actually a javascript thing):

/*************************************** NAVMAIN -> LISTS ***************************************/
#navMain {
width: 100%;
float: left;
background: url(../images/navbarBackground.gif) 0 0 repeat-x;
}
div#navMain ul {
margin: 0;
padding: 0;
list-style: none;
font: normal 10px verdana;
font-weight: bold;
}
div#navMain ul li {
position: relative;
float: left;
}
div#navMain ul li a {
float: left;
display: block;
text-decoration: none;
color: #fff; /* white*/
padding: 5px 15px;
margin: 0;
border-right: 1px solid #590B0C;
height: 25px; /*** Box Model Hack. This line sets the value for Win IE 5. ***/
voice-family: “”}””; /*** Box Model Hack. ***/
voice-family: inherit; /*** Box Model Hack. ***/
height: 15px; /*** Actual value. ***/
}
html>body div#navMain ul li a { /*** Box Model Hack: Be Nice to Opera Rule. ***/
height: 15px; /*** Actual value. ***/
}
div#navMain ul li a:hover {
color: #fff;
text-decoration: none;
background: #8F3031; /*lighter color when hovering over menu choice*/
}
div#navMain ul ul {
display: none; /*** Hides drop-down menu items ***/
float: left;
clear: left;
list-style: none;
position: absolute;
top: 25px;
margin: 0;
}
div#navMain ul ul li {
float: none;
clear: left;
}
div#navMain ul ul li a {
display: block;
width: 165px;
font-weight: normal;
color: #eee;
padding: 2px 15px;
border: 1px solid #7E1011;
border-top: 1px solid #3F0808;
background: #7E1011;
}
div#navMain ul ul li a:hover {
color: #fff;
background: #8F3031;
text-decoration: none;
border-bottom: 1px solid #3F0808;
border-right: 1px solid #3F0808;
border-top: 1px solid #9D494A;
border-left: 1px solid #9D494A;
}

div#navMain li:hover ul, div#navMain li.over ul
display: block; /*** Shows drop-down menu items on hover ***/
}

Thanks in advance for any help you can offer, and don’t bother asking if I can round up the missing javascript.js file, the original designer went missing 2 years ago and left this project undone. -Owly

Also in #CSS _↴