Small Fix Needed For Simple Pulldown Menu System

Hi Everyone,

I'm looking for a "reset" adjustment for this menu system.  Here's what happens: If you hover over a menu selection and then move your mouse cursor off of the menu, when you return your mouse to that menu, the last item you hovered over will still be highlighted.  I'm hoping someone can help by writing up a something that simply resets the menu to it's original state onmouseout (I simply don't know enough about JavaScript to do it).  This might be something a little easier to understand if you see the code...so here it is in 3 files, a js, a css and a html.

-----------------------------------------------------------------
-----------------------------------------------------------------
CascadeMenu.js
-----------------------------------------------------------------
-----------------------------------------------------------------

function InitMenu()
{
  var bar = menuBar.children    

  for(var i=0;i < bar.length;i++)
        {
             var menu=eval(bar[i].menu)
             menu.style.visibility = "hidden"
             bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
             var Items = menu.children
             for(var j=0; j<Items.length; j++)
                  {
                    var menuItem = eval(Items[j].id)
                         
                         if(menuItem.menu != null)
                               {
                                menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
                                //var tmp = eval(menuItem.id+"_Arrow")
                                // tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
                                FindSubMenu(menuItem.menu)}
                        
                          if(menuItem.cmd != null)
                               {
                               menuItem.onclick = new Function("Do("+menuItem.id+")") }
                              
                    menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
                  
                  }    
        
        }  
}
function FindSubMenu(subMenu)
{
            var menu=eval(subMenu)
            var Items = menu.children
             for(var j=0; j<Items.length; j++)
                  {
                    menu.style.visibility = "hidden"
                    var menuItem = eval(Items[j].id)
                    
                    
                    if(menuItem.menu!= null)
                          {
                                menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
                                // var tmp = eval(menuItem.id+"_Arrow")
                                //tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
                                FindSubMenu(menuItem.menu)
                          }

                          if(menuItem.cmd != null)
                               {
                               menuItem.onclick = new Function("Do("+menuItem.id+")") }
                              
                    menuItem.onmouseover = new Function("highlight("+Items[j].id+")")
                         
                  }  
}
function ShowMenu(obj)
{
  HideMenu(menuBar)
  var menu = eval(obj.menu)
  var bar = eval(obj.id)
  bar.className="barOver"
  menu.style.visibility = "visible"
  menu.style.pixelTop =  obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop-2
  menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft-2
}

function highlight(obj)
{
  var PElement = eval(obj.parentElement.id)
  if(PElement.hasChildNodes() == true)
  {  var Elements = PElement.children
       for(var i=0;i<Elements.length;i++)
       {
             TE = eval(Elements[i].id)
             TE.className = "menuItem"
       }
      }
  obj.className="ItemMouseOver"
  window.defaultStatus = obj.title
  ShowSubMenu(obj)
}

function Do(obj)
{
 var cmd = eval(obj).cmd      
 window.navigate(cmd)
 
}

function HideMenu(obj)
{
             if(obj.hasChildNodes()==true)
                    {  
                          var child = obj.children    
                         
                          for(var j =0;j<child.length;j++)
                              {
                                    if (child[j].className=="barOver")
                                    {var bar = eval(child[j].id)
                                     bar.className="Bar"}
                                     
                                    if(child[j].menu != null)
                                      {
                                            var childMenu = eval(child[j].menu)
                                            if(childMenu.hasChildNodes()==true)
                                                       HideMenu(childMenu)
                                            
                                                childMenu.style.visibility = "hidden"
                                           }
                              }
                    
                    }
}
function ShowSubMenu(obj)
{
  PMenu = eval(obj.parentElement.id)
      HideMenu(PMenu)
  if(obj.menu != null)
  {
  var menu = eval(obj.menu)
  menu.style.visibility = "visible"
  menu.style.pixelTop =  obj.getBoundingClientRect().top + Bdy.scrollTop+6
  menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft-6
  if(menu.getBoundingClientRect().right > window.screen.availWidth )
       menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
 }
}

-----------------------------------------------------------------
-----------------------------------------------------------------
CascadeMenu.css
-----------------------------------------------------------------
-----------------------------------------------------------------
.menuBar {
      position: relative;
      background-color: transparent;
      text-align: left;
}
.Bar {
      border: 1px solid #FFFFFF;
      border-bottom: 0px;
      float: left;
      width: 100px;
      cursor: hand;
      text-indent: 2px;
      position: relative;
      background: #FFFFFF;
      padding: 4px;
      font-weight: bold;
}
.menu {
      border: 1px solid #666666;
      visibility: hidden;
      width: 150px;
      position: absolute;
      background-color: #F7F7F7;
      text-indent: 6px;
}
.menuItem {
      padding-right: 16px;
      padding-left: 0px;
      width: 100%;
      cursor: hand;
      line-height: 20px;
      text-indent: 6px;
}
.ItemMouseOver {
      padding-right: 16px;
      width: 100%;
      cursor: hand;
      color: #000000;
      line-height: 20px;
      background-color: #CED7E1;
}
.ItemMouseOut {
      width: 100%;
      background-color: #F7F7F7;
}
.Arrow {
      float: right;
      font: 12px Webdings;
      position: absolute;
}
.barOver {
      border: 1px solid #666666;
      border-bottom: 0px;
      float: left;
      width: 100px;
      cursor: hand;
      text-indent: 2px;
      position: relative;
      background-color: #F7F7F7;
      padding: 4px;
      font-weight: bold;
}

-----------------------------------------------------------------
-----------------------------------------------------------------
test.htm
-----------------------------------------------------------------
-----------------------------------------------------------------
<html>
<head>
<title>Test</title>
<link href="CascadeMenu.css" rel="stylesheet" type="text/css">
<script language="javascript" src="CascadeMenu.js"></script>
</head>

<body OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" id="Bdy">
<!--Begin Menu -->
<div Id="menuBar" class="menuBar" >
<div Id="Bar1" class="Bar" menu="menu1">Menu #1</div>
<div Id="Bar2" class="Bar" menu="menu2">Menu #2</div>
</div>
<!--MenuItem Definition -->
<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" menu="menu3">SubMenu #1</div>
<div Id="menuItem1_2" class="menuItem" title="Yahoo!" cmd="http://yahoo.com">Yahoo!</div>
<div Id="menuItem1_3" class="menuItem" title="Google" cmd="http://google.com">Google</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem">Page #1</div>
<div Id="menuItem2_2" class="menuItem">Page #2</div>
<div Id="menuItem2_3" class="menuItem">Page #3</div>
</div>
<div id="menu3" class="menu">
<div Id="menuItem6_1" class="menuItem">Page #1-1</div>
<div Id="menuItem6_2" class="menuItem">Page #1-2</div>
<div Id="menuItem6_3" class="menuItem" menu="menu4">SubMenu #1-1</div>
</div>
<div id="menu4" class="menu">
<div Id="menuItem7_1" class="menuItem">Page #1-1-1</div>
<div Id="menuItem7_2" class="menuItem">Page #1-1-2</div>
<div Id="menuItem7_3" class="menuItem">Page #1-1-3</div>
</div>
<!--End Menu -->
</body>
</html>
-----------------------------------------------------------------
-----------------------------------------------------------------
To recreate the issue, hover over Menu#1 and then a sub-selection (you should see the item highlight with a light blue color) from there move your mouse cursor over to another Menu item (#2 for example).  If you move your cursor back over to Menu #1 you'll see that your previous selection will still be highlighted.

I don't think this is technically a difficult thing to fix, but then again I don't know much about JavaScript so...500 points to the one that can help me out.

Thanks for your time,
s_r