hjælp til menu i javascript

Jeg har følgende html og java script kode:

Problemet er at jeg vil have den til når musen ikke er over menuen, så skal den ikke vise den.

Er det noget i kan klare?

java script:


  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+")")
              menuItem.onMouseout= new Function("HideMenu(menuBar)")
            }   
       
        } 
  }
  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
    menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
  }
 
  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
    menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
    if(menu.getBoundingClientRect().right > window.screen.availWidth )
      menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
    }
  }



HTML:

<HEAD>


<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</HEAD>

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)"  ID="Bdy" bgColor=aliceblue>

<font color="#800080"><b>Menu</b></font></p>
<DIV Id="menuBar" class="menuBar" >
    <DIV Id="Bar1" class="Bar"  menu="menu1">1</DIV>
    <DIV Id="Bar2" class="Bar"  menu="menu2">2</DIV>
    <DIV Id="Bar3" class="Bar"  menu="menu3">3</DIV>
    <DIV Id="Bar4" class="Bar"  menu="menu4">4</DIV>
    <DIV Id="Bar5" class="Bar"><a href="forretningsbetingelser.php">5</a></DIV>
</DIV>

<!--MenuItem Definition -->
<div Id="menu1" class="menu" cmd="http://javascript.internet.com/">
</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="menuItem3_1" class="menuItem">Page #1</div>
  <div Id="menuItem3_2" class="menuItem">Page #2</div>
  <div Id="menuItem3_3" class="menuItem">Page #3</div>
  <div Id="menuItem3_4" class="menuItem" menu="menu5">SubMenu #4</div>
</div>
<div Id="menu4" class="menu">
  <div Id="menuItem4_1" class="menuItem">Page #1</div>
  <div Id="menuItem4_2" class="menuItem">Page #2</div>
  <div Id="menuItem4_3" class="menuItem">Page #3</div>
  <div Id="menuItem4_4" class="menuItem">Page #4</div>
</div>
<div id="menu5" class="menu">
</div>
<div id="menu6" 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="menu7">SubMenu #1-1</div>
</div>
<div id="menu7" 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">Paged #1-1-3</div>
</div>

<!-- End of Menu -->