Imagen de fondo en div

[ONahuelO]

Hola, siguiendo en esto del css de mi web me he topado con otro problema, le estoy haciendo un menu desplegable, con javascript y css. Ya he logrado el tema de que me oculte y muestre la divicion al pasar el puntero sobre el linck pero nececitaria que tambien al pasar el puntero sobre em mismo link, la imagen que este debajo de este cambie (para que de el efecto de seleccion), pero al hacerlo es como que la imagen de fondo no toma el tamaño entero de la divicion, es como que solo toma el tamaño de las letras.
Imagenes:
Normal :

Al pasar em mause por encima:

Otro problema que me sucede es que el texto no queda en el centro de la divicion, queda en el medio pero arriva.

Aca esta el html:

Código:

<div  id="s_menu" onmouseout="ocultar('s_menu');"></div>

<div class="menu">
<div class="menu_items" align="center" onmouseover="mostrar('s_menu');">
<a >dfgd</a>
</div>
</div>

Aca esta el CSS

Código:

.menu_items{
	position:relative;
	z-index:100;
	left: 52px;
	top: 27px;
	width: 109px;
	height: 32px;
	vertical-align:middle;
	background:#000 url('s_munu_out.png') center top no-repeat;
	

}

.menu_items a:hover {
background:#000 url('s_munu_over.png') center top no-repeat;
width: 109px;
height: 32px;	 
}

Espero que me puedan ayudar, desde ya muchisimas gracias.

[daPhyre]

Es por que se lo asignas al anchor <a>. Prueba asignarlo a su contenedor.

[ONahuelO]

Es lo mismo lamentablemente, le agrego al a los datos de ancho y alto pero es igual el resultado.

Código:

<div  id="s_menu" onmouseout="ocultar('s_menu');"></div>
<div class="menu">
<div  class="menu_items" align="center" onmouseover="mostrar('s_menu');">
<ul >
<li style="height:200px;">
<a style="height:100px; width:500px;">asdasd</a>
</li>
</ul>
</div>
</div>

Código:

.menu_items li{
	display:block;
	float:left;
	margin:0;
	pading:0;
	position:absolute;

	left: 38px;
	top: 26px;
	vertical-align:middle;
}

.menu_items li a:hover{
color:#FFFFFF;
background-color:#FFFFFF;
}
#s_menu {

	position:absolute;
	z-index:100;
	background-image:url('s_menu.png');
	width:976px;
	height:150px;
	left: 0px;
	top: 70px;
	display:none;
}

[alexk]

no entiendo bien que quieres hacer, pero <a> es un elemento en linea... para que coja tamaños y demasn necsitas, display:block; ahora...

Código:

.menu_items li{
	display:block;
	float:left;
	margin:0;/*usa mejor un reset para no ponerselo a todos los elementos*/
	pading:0;/*usa mejor un reset para no ponerselo a todos los elementos*/
	position:absolute;/*o flotas el elemento o le das posicion absoluta sacando del flujo del sitio del todo*/

	left: 38px;
	top: 26px;
	vertical-align:middle;
}

.menu_items li a:hover{
color:#FFFFFF;
background-color:#FFFFFF;
}
#s_menu {

	position:absolute;
	z-index:100;
	background-image:url('s_menu.png');
	width:976px;
	height:150px;
	left: 0px;
	top: 70px;
	display:none;
}

no necesitas usar js para un menu desplegable pasate por http://www.araudi.net para ver ejemplos de menus desplegables....

[ONahuelO]

Muchas gracias me ha funcionado jolla, lo que me sigue quedando mal es que el link queda en la parte superior de la divicion y no en el medio

Edit: nono ya lo solucione, muchas gracias