I'm hoping someone will say - "thats an easy one!" - I think the solution is quite simple - its just I cant see it!

Basically, I want to have 3 javascript menus in a page - but I can only get it to work with one instance of the menu - see this link for the working copy with 1 menu:

http://jemmakidd.com/store_menus/css...u_working.html

Here is the link to the non-working version with 3 menus:

http://jemmakidd.com/store_menus/css...T_working.html

Notice in the non-working instance that the menus don't have 2nd level drop down menus that appear dynamically on mouseover - and they should like the working version.

I have been using javascriptkit.com's code which you will find here:

http://www.javascriptkit.com/script/...icalmenu.shtml

The javascript indicates I CAN have multiple menus in a page as you will see from the code here on the first line:

[CODE}

var menuids=new Array("verticalmenu_jk, verticalmenu_jkms, verticalmenu_jkmspro") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
}
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

[/CODE]

And here is my html code with the three declared menus in it:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

<script type="text/javascript" src="cssverticalmenu_NOT_working.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at # for this script and 100s more

***********************************************/

</script>

</head>

<body bgcolor="#000000">


<table width="1109" height="109" border="1">
  <tr>
    <th width="308" scope="row"><div align="left">
      <ul id="verticalmenu_jk" class="glossymenu">
        <li><a href="#">FACE</a>
            <ul>
                 <li><a href="#">PRIMER</a></li>
              <li><a href="#">FOUNDATION</a></li>
              <li><a href="#">POWDER</a></li>
              <li><a href="#">CONCEALER</a></li>
              <li><a href="#">BLUSH</a></li>
              <li><a href="#">LUMINISORS</a></li>
            </ul>
        </li>
        <li><a href="#">EYES</a>
            <ul>
              <li><a href="#">PRIMER</a></li>
              <li><a href="#">SHADOW</a></li>
              <li><a href="#">MASCARA</a></li>
              <li><a href="#">BROW</a></li>
              <li><a href="#">LASH</a></li>
              <li><a href="#">LINER</a></li>
              <li><a href="#">GLOSS</a></li>
            </ul>
        </li>
        <li><a href="#">LIPS</a>
            <ul>
              <li><a href="#">PRIMER</a></li>
              <li><a href="#">LIP CARE</a></li>
              <li><a href="#">LIPSTICK</a></li>
              <li><a href="#">LIP GLOSS</a></li>
              <li><a href="#">LIP PENCIL</a></li>
            </ul>
        </li>
        <li><a href="#">TOOLS</a>
            <ul>
              <li><a href="#">EYE</a></li>
              <li><a href="#">FACE</a></li>
              <li><a href="#">LIP</a></li>
              <li><a href="#">BAGS/CASES</a></li>
              <li><a href="#">LIP PENCIL</a></li>
            </ul>
        </li>
        <li><a href="#">COLLECTIONS</a></li>
        <li><a href="#">MULTI-PURPOSE</a></li>
      </ul>
    </div></th>
    <td width="272"><ul id="verticalmenu_jkms" class="glossymenu">
<li><a href="#">FACE</a>
<ul>
   <li><a href="#">PRIMER</a></li>
   <li><a href="#">FOUNDATION</a></li>
   <li><a href="#">POWDER</a></li>
   <li><a href="#">CONCEALER</a></li>
   <li><a href="#">BLUSH</a></li>
   <li><a href="#">LUMINISORS</a></li>
   </ul>                            
</li>
<li><a href="#">EYES</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">SHADOW</a></li>
<li><a href="#">MASCARA</a></li>
<li><a href="#">BROW</a></li>
<li><a href="#">LASH</a></li>				
<li><a href="#">LINER</a></li>
<li><a href="#">GLOSS</a></li>
</ul>                                                        
</li>
<li><a href="#">LIPS</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">LIP CARE</a></li>
<li><a href="#">LIPSTICK</a></li>
<li><a href="#">LIP GLOSS</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">TOOLS</a>
    <ul>
<li><a href="#">EYE</a></li>
<li><a href="#">FACE</a></li>
<li><a href="#">LIP</a></li>
<li><a href="#">BAGS/CASES</a></li>
<li><a href="#">LIP PENCIL</a></li>
   </ul>
</li>
<li><a href="#">COLLECTIONS</a></li>
<li><a href="#">MULTI-PURPOSE</a></li>
</ul></td>
    <td width="1280"><ul id="verticalmenu_jkmspro" class="glossymenu">
<li><a href="#">FACE</a>
<ul>
   <li><a href="#">PRIMER</a></li>
   <li><a href="#">FOUNDATION</a></li>
   <li><a href="#">POWDER</a></li>
   <li><a href="#">CONCEALER</a></li>
   <li><a href="#">BLUSH</a></li>
   <li><a href="#">LUMINISORS</a></li>
   </ul>                            
</li>
<li><a href="#">EYES</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">SHADOW</a></li>
<li><a href="#">MASCARA</a></li>
<li><a href="#">BROW</a></li>
<li><a href="#">LASH</a></li>				
<li><a href="#">LINER</a></li>
<li><a href="#">GLOSS</a></li>
</ul>                                                        
</li>
<li><a href="#">LIPS</a>
<ul>
<li><a href="#">PRIMER</a></li>
<li><a href="#">LIP CARE</a></li>
<li><a href="#">LIPSTICK</a></li>
<li><a href="#">LIP GLOSS</a></li>
<li><a href="#">LIP PENCIL</a></li>
</ul>
</li>
<li><a href="#">TOOLS</a>
    <ul>
<li><a href="#">EYE</a></li>
<li><a href="#">FACE</a></li>
<li><a href="#">LIP</a></li>
<li><a href="#">BAGS/CASES</a></li>
<li><a href="#">LIP PENCIL</a></li>
   </ul>
</li>
<li><a href="#">COLLECTIONS</a></li>
<li><a href="#">MULTI-PURPOSE</a></li>
</ul></td>
  </tr>
</table>
</body>
</html>
So of course my question is - what have I missed and how do I get it to work!?

Many thanks in advance...