Help With Vertical Hover Menu

[hybrid kill3r]

So, I've been trying to learn JavaScript, but I'm having a bit of trouble with a code I've been trying to get working. It's a vertical hover menu. Basically, a horizontal navigation menu with submenus that appear when you hover over a link. The main menu appears correctly on page load. I hover over a list item with a submenu in it and the submenu appears. But it's about half way down the page from the main menu. Once I mouse-out, the submenu disappears, but so does the main menu. If I hover away from the main menu item with the submenu in it, the main menu remains until I mouse-out from that. I hope I've explained my problem well enough so that you know what I mean. I can't seem to figure out how to fix this.

var menuIds=["navigation"];	    	    function generateMenus(){		    		    for(var i = 0; i < menuIds.length; i++){			    			    var menuLists = document.getElementById(menuIds[i]).getElementsByTagName("ul");			    			    for(var t = 0; t < menuLists.length; t++){				    				    menuLists[t].style.top = menuLists[t].parentNode.offsetHeight + "1px";				    menuLists[t].parentNode.onmouseover = function(){					    					    this.style.zIndex = 100;					    this.getElementsByTagName("ul")[0].style.visibility = "visible";					    this.getElementsByTagName("ul")[0].style.zIndex = 0;					    				    }				    				    menuLists[t].parentNode.onmouseout = function (){					    					    this.style.zIndex = 0;					    this.getElementsByTagName("ul")[0].style.visibility = "hidden";					    this.getElementsByTagName("ul")[0].style.zIndex = 100;					    				    }				    			    }			    		    }		    	    }	    	    if(window.addEventListener){		    		    window.addEventListener("load", generateMenus, false);		    	    } else if(window.attachEvent){		    		    window.attachEvent("onload", generateMenus);		    	    }

#navigation {    background: url(images/navigation_bg.gif) repeat-x;    border-top: #666666;    border-bottom: #333333;    height: 59px;    margin: 0px;    padding: 0px;    text-align: center;    line-height: 59px;}#navigation ul {    margin: 0;    padding: 0;    list-style-type: none;}#navigation ul li {    position: relative;    display: inline-block;    float: left;}#navigation ul li a {    display: bock;    width: 120px;    padding: 2px 8px;    border: 0px;    text-decoration: none;    background: url(images/navigation_item_bg.gif) repeat-y left;    color: #737373;    font-size: 14px;    font-weight: bold;}#navigation ul li ul {    top: 0;    left: 0;    border-top: 1px solid #202020;    position: absolute;    display: block;    visibility: hidden;    zIndex: 100;}#navigation ul li ul li {    display: inline;    float: none;}#navigation ul li ul li a {    width: 160px;    font-weight: bold;    text-decoration: none;    background: #000;    border-width: 0px 1px;}#navigation ul li ul li a:hover {    background: #333333;}

[justsomeguy]

If the offsetHeight is 100, then when you do this: menuLists[t].style.top = menuLists[t].parentNode.offsetHeight + "1px"; you are setting it to "1001px". You're not adding 1 to the height, you're appending the string "1px" to whatever the height is. Setting the parenNode's zIndex to 0 is probably making it disappear on mouseout.

[hybrid kill3r]

Ahh yes, your statement about offsetHeight makes total sense. The zIndex, on the other hand, not so much.. lol. What element's zIndex be set to instead of the parentNode? I tried commenting out "this.style.zIndex = 0" in the mouseout function, but that didn't change anything.

[justsomeguy]

It's difficult to guess the problem, it would probably be a good idea to use your browser's developer tools to see what styles are being applied to the element that is disappearing. You can change the styles in the browser to see how the changes affect it.