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

[marisoplete]

Hola!

He probado tu menú y el único fallo que me daba (no sé si a tí te pasará esto) es que en el "hover" da un pequeño salto porque tienes un "padding-bottom" de un pixel que sobraría. Igual esto no te interesa pero bueno.

En cuanto a tus otras preguntas, creo que lo has hecho correctamente.

No sé si te he ayudado o no pero bueno. Suerte!

[lizfranco]

Gracias por probarlo marisoplete,

Ese salto de de 1px lo puse porque la imagen naranja me la muestra 0.5 mas arriba, no he podido hallarle la causa de esto. Puede que sea que esta heredando o combinando con otros divs que tengo arriba. Voy a revisarlo!

Gracias, fue de ayuda saber que lo estoy haciendo bien

Liz