Hi all.

I'm trying to add a third level to a css flyout/dropdown list.

Currently, it looks like this:
HTML Code:
<div id="nav-cat">
    <ul class="level1">
         <li class="submenu"><a href="http://www.mysite.com">Category</a>
            <ul class="level2">
               <li>
                <a href="http://www.mysite">SubCategory</a>
                   </li>
               </ul>
               </ul>  
I'd like to use javascript to do this:
HTML Code:
   <div id="nav-cat">
    <ul class="level1">
        <li class="submenu"><a href="http://mysite.com">Category</a>
            <ul class="level2">
              <li class="submenu"><a href="http:.mysite.com">SubCategory</a>
             <ul class="level3">
                   <li><a href="#">product1</a></li>
             </li>
              </ul>
You can see that I just need to add a class name to the 2nd <li> tag after "<ul class="level2">" (this class name being "submenu")

and then.....

add a '<ul class="level3">' to that li tag's 2nd child (after the a tag).

Once that is done, I need to add <li><a href="linkToProduct">Product Name</a>.

In terms of js, I've got this far (grumble, grumble....) happening onload:

Code:
function test() {
    var aElm=document.getElementsByTagName('ul');
        
        for(var i=0; i<aElm.length; i++) {
        if(aElm[1].className=="level2") {
           var myUl = aElm[1];
         
         var secondLi = myUl.childNodes[0].className='submenu';
         var thirdUl = document.createElement('ul').className='level3';
          
        }
      }
        
    }
I don't think I'm approaching this the right way. Totally frustrated here. Any help is much appreciated.