Need help with this script for CSS menu

[shanstafari]

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:

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;

And here's my XHTML:

<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 &#187;</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 &#187;</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>

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!

[chreo]

id only once per page

I don't know javascript, but I do know something about html, and you can only use an id ONCE in a page, a class can be used as many times as you want Change id="nav" to class="nav" before you do anything else to your code.