Getting a horizontal drop down menu working in IE using CSS

[Haly]

I've recently implemented a horizontal drop down menu on my site using CSS. The tutorial I read for how to do it (http://www.#*$!.com/articles/horizdropdowns/)(alistapart) said it wouldn't work in IE without some javascript code and a css hack to get it working.

Tried both that and still doesn't work :(

The page is at <snip> it works fine in firefox but not IE.

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

is the javascript that according to the tutorial would fix the IE bug :(

[edited by: SuzyUK at 10:07 am (utc) on Nov. 18, 2004]

[SuzyUK]

Welcome to WebmasterWorld Haly

do you know what that javascript is doing or have you just pasted it as is?

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
[/b]if (node.nodeName=="LI") {[/b]
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

First Line that I have bolded means that the UL in question should have the ID "nav"..

it will give every <li> that is a child of that <ul> a class name of "over" when it is hovered over

so everywhere in you CSS that you have a li:hover rule you should put a li.over rule too..

The javascript is changing the "ul#nav li" class name on the fly.. but you still need to tell your CSS what to do with the class name

any help? if not just ask away.. I'm not good with js and that's just my limited explanation ;)

Suzy