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:

HTML Code:
<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>