I'm trying to make a CSS multi-level drop-down menu, and I'm using Javascript to get it to work in IE. I got the Javascript from A List Apart, but in their example the menu is not multi-level. So the menu's first level is working fine in IE, but the sub-levels aren't popping up. Basically this Javascript is supposed to add a class with the name "over" to whichever <li> element your mouse is over. Here it is:
And here's my XHTML:
Basically just your standard nested-list menu, with the id "nav" added to all of the <ul>'s to get the Javascript to work right (theoretically).
I am a Javascript novice, so any help is really appreciated. Thanks!
Code:
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;
Code:
<div id="header"><a id="headerLogo" href="index.php"><img src="images/header/eagle-head.gif" alt="Home" /></a><a id="aboutUs" href="#">About Us - Contact Us</a><img class="headerTipImage" src="images/header/header-logotip.gif" alt="headerTipImage" /></div> <div id="menu"><img class="menuTipImage" src="images/menu/menu-logotip.gif" alt="headerTipImage" /> <ul id="nav"> <li><a id="menuCatalog" href="#">Online Catalog</a></li> <li><a id="menuDealer" href="#">Find Your Dealer</a> <ul id="nav"> <li><a href=" ">Domestic</a></li> <li><a href=" ">Canada</a></li> <li><a href=" ">Europe</a></li> <li><a href=" ">Latin America</a></li> <li><a href=" ">Asia/Pacific Rim</a></li> </ul></li> <li><a id="menuTraining" href="#">Training and Education</a> <ul id="nav"> <li><a href=" ">XP Technology</a></li> <li><a href=" ">Quik-Tip</a></li> <li><a href=" ">Infinitip »</a> <ul id="nav"> <li><a href=" ">Periodontal Disease</a></li> <li><a href=" ">Ultrasonic</a></li> </ul></li> <li><a href=" ">Cassettes</a></li> <li><a href=" ">Instrument Care</a></li> </ul></li> <li><a id="menuPromo" href="#">Promotions/Trade Shows</a> <ul id="nav"> <li><a href=" ">Promotions »</a> <ul id="nav"> <li><a href=" ">Quarterly Promotions</a></li> <li><a href=" ">Dealer Promotions</a></li> <li><a href=" ">Trade Show Promotions</a></li> </ul></li> <li><a href=" ">Trade Shows</a></li> </ul></li> <li id="menuLast"><a id="menuCS" href="#">Customer Service</a> <ul id="nav" class="lastMenuItem"> <li><a href=" ">Frequently Asked Questions</a></li> <li><a href=" ">Employees</a></li> <li><a href=" ">About Us</a></li> <li><a href=" ">Contact Us</a></li> <li><a href=" ">Form Download</a></li> <li><a href=" ">Guarantees</a></li> </ul></li> </ul></div>
I am a Javascript novice, so any help is really appreciated. Thanks!
Comment