Internet Explorer 6 is killing my CSS hover dropdown menu!

Hi,

I'm relatively new at web design and am putting together a fairly basic website for a charity I'm involved with. I'm trying to use a vertical hover drop-down menu and it looks great in FF, Opera, Safari. But when I open it in my old Internet Explorer 6 the menu is destroyed, there's no hover just a list of links.

I've tried the Suckerfish javascript as well as about 3 other suggestions, but none have made any difference at all.

This is the HTML:

<div id="menu" align="left">
<ul>
<li><h2>About SCC</h2>
<ul>
<li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">Staff</a>
<li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">About</a>
<li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">Current Projects</a>
<li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">News</a>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Support SCC</h2>
<ul>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Donate</a></li>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Gift Shop</a></li>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Sponsor</a></li>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Urgent Appeals</a></li>
<li><a href="vs7.html" title="Complete Example">Get Involved</a>
</ul>
</li>
</ul>

<ul>
<li><h2>Information</h2>
<ul>
<li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Cambodia</a></li>
<li><a href="vs7.html" title="Complete Example">Human Trafficking</a>
</ul>
</li>
</ul>


</div>

And then this is the .css file:

#menu {
width: 100%;
float: left;
}
#menu ul {
left:0px;
list-style: none;
margin: 0;
padding: 0;
width: 10em;
float: left;'
background:#FFFFFF;
text-align:center
}

#menu a, #menu h2 {
width: 120px;
height:18px;
font: bold 16px/11px arial;
display: block;
margin: 0;
padding: 1px 2px;
text-align:center;

}

#menu h2 {
color: #fff;
text-transform: uppercase;
}

#menu a {
padding:0;
height:16px;
text-decoration: none;
font:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#ed1c24;
border-color:#000066;
width:130px;
text-align:center;
color:#FFFFFF;

}

#menu a:hover {
color:#000033;
background-color:#ed1c24;
}

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul {
display: none;
}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

<!--[if IE]>
<style type="text/css" media="screen">

</style>
<![endif]-->

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

-----------

Sorry, I haven't put it up on the internet yet Any ideas? I'm tearing my hair out here!

 

You've placed the JS directly into the page without any containing markup. You need to use the following;

<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").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>

Code (markup):

The script also referenced 'nav' as your menu, however you're using 'menu' so i've made the edit in the above code, just copy and paste it (overwriting the JS chunk you already have). Also remove 'align=left' from the menu as its invalid and as old as the hills.

Finally, I haven't used suckerfish for a long time but if my memory serves me well you will also need to edit your css to include markup for '.sfhover' where your existing hovers are present (Re-check the documentation for details). This is because the javascript is making IE switch the class of the element, meaning the markup that you currently have doesn't really do anything in IE because 'sfhover' currently has no style.

 

In IE, use hoverintent as opposed to the normal one