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 (http://www.alistapart.com/articles/dropdowns/), 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 »</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>

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]

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.