creating a menu in javascript issues

Question

I have created a menu using js and css. Each li in the top level ul has a specific background image also a specific onmouseover image.

Everything is working fine, EXCEPT the onmouseover background whenever I have a submenu under it. Please check the vertical menu under the following link: http://www.balouta.com/Autostar3/testmenu/test.html

The Javascript used is the following:

var menuids=new Array("verticalmenu")
var submenuoffset=0 

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++){

    ultags[t].parentNode.onmouseover=function(){ 

    this.getElementsByTagName("ul")[0].style.right=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)

Answer 1

The problem is that your hover over a top level menu displays a div(sub menu) that hides the content of top menu beneath so no hover for a (of top menu ) is triggered .

A small fix would be to remove the width for the items that have submenu.

remove the following line : width: 225px; (line 81) in the css

Do the same for all the other menus that has submenu.