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
Code:
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
Code:
<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
