Menu
Hi,
I am building a website in html and the menu contains of images. Now is the problem as follows:
When I hover the top menu, the submenu’s drop down. Also the top menu changes image due a onmousover. Now the problem is that when I point at one of the submenu’s, the topmenu changes to the mouseout image. What I want is that the topmenu keeps the mousover image during the hovering of the submenu’s.
I thought maybe it could be done by calling two events when hovering a submenu. So that when a submenu is hovered, the image changes to the rollover, but also the top menu changes to the rollover.
I hope someone understands the problem and can help me because I really need this.
The code is as follows:
[code=html]
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
margin-left: 0px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: “”; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 0px 0px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
}
nav ul ul ul {
position: absolute;
}
</style>
</head>
<body>
<div align=””>
<nav id=”menu”>
<ul>
<li><a href=”#” ><img style=”width:182px; height: 189px;” src=” Header/vogel1.png ” onmouseover=”this.src=’ Header/vogel1RO.png ‘” onmouseout=”this.src=’ Header/vogel1.png ‘” /></a>
</li>
<li><a href=”#” ><img style=”width:182px; height: 189px;” src=” Header/vogel2.png ” onmouseover=”this.src=’ Header/vogel2RO.png ‘” onmouseout=”this.src=’ Header/vogel2.png ‘” /></a>
</li>
<li><a href=”#” ><img name=”hoofd” id=”hoofd” style=”width:182px; height: 189px;” src=” Header/vogel3.png ” onmouseover=”this.src=’ Header/vogel3RO.png ‘” onmouseout=”this.src=’ Header/vogel3.png ‘” /></a>
<ul>
<li><a href=”#” ><img style=”width:182px; height: 61px;” src=” Header/geboortekaart.png ” onmouseover=”this.src=’ Header/geboortekaart-RO.png ‘;” onmouseout=”this.src=’ Header/geboortekaart.png ‘” /></a></li>
<li><a href=”#” ><img style=”width:182px; height: 61px;” src=” Header/schilderij.png ” onmouseover=”this.src=’ Header/schilderij-RO.png ‘” onmouseout=”this.src=’ Header/schilderij.png ‘” /></a></li>
</ul>
</li>
<li><a href=”#” ><img style=”width:182px; height: 189px;” src=” Header/vogel4.png ” onmouseover=”this.src=’ Header/vogel4RO.png ‘” onmouseout=”this.src=’ Header/vogel4.png ‘” /></a>
</li>
<li><a href=”#” ><img style=”width:182px; height: 189px;” src=” Header/vogel5.png ” onmouseover=”this.src=’ Header/vogel5RO.png ‘” onmouseout=”this.src=’ Header/vogel5.png ‘” /></a>
</li>
</ul>
</nav>
</div>
</body>
</html>