Hello everyone,

Just wondering if anyone is able to help me out with a CSS question. I'm trying to create a horizontal navigation bar for a home page, and I would like it so when the user hovers over the link, the image is changed.

Here is the code I have at the minute, but this puts one image for all links (the home.gif image). I would like to be able to target each href in the ordered list so that I can change the home.gif, to about_us.gif etc;

Code:
<!DOCTYPE html>

<html>
<head>
	<title>Bar Zest</title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="container"> 
<div id="navmenu">
	<ol>
		<li><a href="#">About us</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">VIP</a></li>
		<li><a href="#">Contact us</a></li>
	</ol>
</div>		
</div>

	
</div>
</body>

</html>
and here is the CSS:

Code:
#container {
	text-align: center;
	margin: 15px;
}

#navmenu {
	width: 900px;
	height: 60px;
	padding: 0px;
	margin: 0px auto;
}

#navmenu ol {
	list-style-type: none;
	margin: 4px;
	padding: 0px;
	text-align: center;
}

#navmenu ol li {
	width: 200px;
	float: left;
	margin: 4px;
}
#navmenu ol li a {
	text-decoration: none;
	display: block;
	color: transparent;
	width: 200px;	
	height: 60px;
	line-height: 40px;
	font-size: 14pt;
	background-image: url(images/home.gif);
}

#navmenu a:hover {
	background-image: url(images/home.gif);
	background-position: -207px 0px;
	
}

#navmenu ol li a {
	text-decoration: none;
	display: block;
	color: transparent;
	width: 200px;	
	height: 60px;
	line-height: 40px;
	font-size: 14pt;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;

}

#navmenu a:hover {
	background-image: url(images/home.gif);
	background-position: -207px 0px;
	
}
Any help would be very much appreciated,

Cheers