Tengo una duda sobre como crear un rollOver metiendo un <img src... en cada <li>
y lo que me gustaria saber es como quitar el contenido de los <li> sin que me desaparezca todo el bloque, y aparezca lo que he puesto en el CSS de la etiqueta <a> con su clase. 
Dejo aqui el codigo que he empleado: 
<style> 
ul{
	list-style-type:none;
	border:2px #9966CC solid;
	} 
ul li{
	display: inline;
	padding-right: 7px;
	margin-right: 7px;
	} 
#nav{
          width:953px;
	  height:autopx;
	  margin:0px auto 0px auto;
	  margin-top:90px;
	} 
#nav a.fiestas{
			background-image: url(images/fiestasbut.png);
			background-repeat: no-repeat;
			background-position: 0 -30px;
	} 
#nav a.fiestas:hover{
				background-image: url(images/fiestasbutover.png);
				background-repeat: no-repeat;
				background-position: 0 -30px;
	}		 
.nnpad{
		padding-left:7px;
	}
</style> 
<body>
	<div id="nav">
        	<ul>
            	<li class="nnpad"><a class="fiestas" href="#"><img src="images/fiestasbut.png" /></a></li>
                <li><a href="#"><img src="images/noticiasbtu.png" /></a></li>
                <li><a href="#"><img src="images/galeriabut.png" /></a></li>
                <li><a href="#"><img src="images/videobut.png" /></a></li>
                <li><a href="#"><img src="images/biobut.png" /></a></li>
                <li><a href="#"><img src="images/dossierbut.png" /></a></li>
                <li><a href="#"><img src="images/musicabut.png" /></a></li>
                <li><a href="#"><img src="images/contactobut.png" /></a></li>
            </ul>
    </div>
</body>  
Tambien he probado a hacerlo en vez de con <li> con <div> y meterle a cada div su id y en sus CSS un background con la imagen,etc y en el codigo meterle un onmouseover y su respectivo onmouseout, con este JS: 
<script type="text/javascript">
		function rollOver(img){
								var dir = document.getElementById('xxx');dir.style.backgroun  dImage = 'url(images/' + img + '.jpg)';
		}
	</script> 
y en su codigo: 
<a href="#"><div id="xxx" onmouseover="rollOver('img1')" onmouseout="rollOver('img2')"></a> 
Pero igualmente me sigue sin aparecer dentro del cuadro del "nav" esa imagen con su hover de boton. 
--------------------------------------------------------------------------------------------------------  
Espero haber formulado bien la pregunta o la duda, soy nuevo en este foro, el cual me recomendaron, y aun estoy descubriendo como funiona :), pero pronto arreglare el perfil y poco a poco lo ire descubriendo mejor. 
Gracias de antemano. 
Un saludito