ul#cssnav {
padding:0;
list-style-type:none;
}
ul#cssnav li {
	position:relative;
	background: url(../images/tab_white.gif) no-repeat left top;/* over state of image*/
	float:left;
	width: 120px;
	height: 28px;
	text-align:center;
	font: bold 13px Arial, Helvetica, sans-serif;
}
#cssnav li a {
	display:block;
	width: 120px;
	height: 21px;
	display: block;
	color: #FFF;
	text-decoration: none;
	background: url(../images/tab_black.gif) no-repeat left top;/* normal state of image*/
	padding-top: 7px;
}
#cssnav li a:hover,#cssnav li.current a {background:transparent;color:#000} /* hide anchor on hover (and set current tab)*/

Here is another example that uses a different image for each rollover and therefore more classes are