menu, cambiando imagenes de fondo

[lizfranco]

Hola todos..
Estoy haciendo el siguiente menu:



Lo que hice fue hacer una lista y poner una imagen blanca de fondo a cada item de la lista. Pense que hacer el mouseover del cambio de imagen era facil, aunque funciona no me muestra exactamente como me gustaria.

tengo este codigo:

Código HTML:

<div id="menu_bg">
    <ul id="menu_items" class="hyper_color">
	<li><a href="#"><span>menu1</span></a></li>
	<li><a href="#"><span>menu2</span></a></li>
	<li><a href="#"><span>menu3</span></a></li>
    </ul>
</div> 

Código:

div#menu_bg {
	position:relative;
	margin:auto;
	padding:auto;
	margin-top:5px; 
	padding-top:1px; 
	margin-left:20px;
	width: 168px;
	height: 128px;
	background:url(../images/family_menu_blue.gif) 0 0 no-repeat;
}
ul#menu_items {
	margin-top: 20px;
}
ul#menu_items li{
	color:#077093;
	font-size:13px;
	list-style: none;
	margin-left: -24px;
	padding-bottom:6px;
	position:relative;
	background:url(../images/menu_white_bg.gif) 0 0 no-repeat;
}

ul#menu_items li span{
	position:relative;
	margin-left: 17px;
	width:132px;
}
ul#menu_items li a:hover{
	clear:both;
	position:relative;
	color:#FFFFFF;
	font-size:13px;
	list-style: none;
	display:block;
	background:url(../images/button_orange_1.gif) 0 0 no-repeat;
	padding-bottom: 1px;
}

tengo estas dos preguntas:
1. para cambiar imagenes de fondo es correcto simplemente cambiarle el a:hover a li? o debo usar imagenes con capas?

2. usando estas imagenes de fondo es posible que al pasar el cursor por el fondo de la imagen (no solo por la palabra) me haga el efecto?

Gracias de antemano.
Liz