Hello,
I am not at all experienced in Javascript so please bear with me. I'm trying to create a drop-down menu that will work in IE, and trying to use some Javascript code that I got from
here. It is supposed to make the menu show up by mouseover. Unfortunately nothing happens (no error codes either) - I don't see the menu when I roll over the title with the mouse (although it works in Firefox, so I know the problem is with the IE-specific Javascript code).
I have found using
- alert(navRoot.childNodes.length);
that it is correctly identifying that there are 6 items in the menu. So it is at least executing the for loop.
Your help in getting this to work would be greatly appreciated - I'm developing a website for a children's charity in Africa if that adds motivation!
Many thanks,
Tom
-
<html>
-
<head>
-
- <script type="text/javascript">
-
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;
-
</script>
-
- <style>
-
- ul { padding: 0; margin: 0; list-style: none }
-
li { float: left; position: relative; width: 11em }
-
li ul { display: none; position: absolute; top: 1em; left: 0 }
-
li > ul {
-
top: auto;
-
left: auto;
-
}
-
li:hover ul, li.over ul{ display: block }
-
</style>
-
-
</head>
-
<body>
-
-
<ul>
-
<li>About WKU
-
<ul id="nav">
-
<li><a href="">History</a></li>
-
<li><a href="">Programs</a></li>
-
<li><a href="">Locations</a></li>
-
<li><a href="">Sponsors & Supporters</a></li>
-
<li><a href="">Staff</a></li>
-
<li><a href="">Volunteers</a></li>
-
</ul>
-
</li>
-
</ul>
-
</body>
-
</html>
-
Drop-down menu in IE using Javascript 
