1. Rollover horizontal list Menu

<!-- You must build this code into - head -->
<style type="text/css" media="screen">
	body
	{
		margin: 0;
		padding: 0;
		text-align: center;
		font: 85% arial, helvetica, sans-serif;
		background: #B0BFC2;
		color: #444;
	}
	
	#container
	{
		text-align: left;
		margin: 0 auto;
		width: 728px;
		background: #FFF;
	}
	
	h1
	{
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #fff;
	}
	
	h1 img
	{
		display: block;
		border: 0;
	}
	
	ul#topnav
	{
		margin: 0;
		padding: 5px 10px;
		list-style-type: none;
		background: #387A9B;
	}
	
	ul#topnav li
	{
		display: inline;
		background: url(header-bullet.gif) no-repeat 0 50%;
		padding: 0 10px 0 8px;
	}
	
	ul#topnav li a:link, ul#topnav li a:visited
	{
		text-decoration: none;
		color: #fff;
	}
	
	ul#topnav li a:hover, ul#topnav li a:active
	{
		text-decoration: none;
		color: #387A9B;
		background: #fff;
	}
</style>
<!-- You must build this code into - body -->
<ul id="topnav">
        <li><a href="#">Skip to content</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
Needed images