Menu
Hello everyone i am quite new to javascript and thought i would try making a onmouseover menu which hides and shows the visibility on mouseover…yet i am having problems
If anyone could show me where i have gone wrong it would be a great help, here was my theory..
1/ find the ul’s on the page
2/ loop through the ul’s…set the ones with id’s to visible on mouseover
3/ Set the mouseout on the now visible menu
the problem is when i mouseout off the UL onto the LI the menu collapses
help?!
[CODE]
<Style type=”text/css”>
div#subNav_home {border:1px solid red; visibility:hidden;}
div#subNav_home li {z-index:0; background-color:green; }
</Style>
</head>
<body>
<ul class=”navigation”>
<li><a href=”#” id=”navigation_home”>Menu</a>
<ul id=”subNav_home”>
<li>one</li>
<li>two</li>
<li><a href=”#”>three</a></li>
</ul>
</li>
</ul>
<script type=”text/javascript”>
var homeMenu = document.getElementById(“navigation_home”);
var ul = document.getElementsByTagName(“ul”);
function popup() {
for(i=0; i < ul.length; i++) {
if(ul[i].getAttribute(“id”) != null) {
ul[i].style.visibility=”visible”;
ul[i].onmouseout = function() {
this.style.visibility=”hidden”;
}
}
}
}
homeMenu.onmouseover = function() {
popup();
}
</script>