Cambiar color texto contenido cuando el ratón se situa en el area

[tetosan]

Me explico,

Tengo un menú con diferentes opciones, el menú es de fondo blanco y letras moradas.





Ahora mismo, cuando el ratón se sitúa dentro del área donde está el texto el fondo se vuelve morado. OK

Cuando el ratón se situa en el enlace, el texto se vuelve blanco y el fondo morado. OK



Pero cuando el ratón esta en el área, sin tocar al texto, el fondo es morado al igual que las letras, por lo tanto las letras no se ven.



¿Alguien sabe como hacer para que cuando el raton se situe en el area, se cambie el color de la letra aunque el raton no toque dichas letras?

Ahora mismo tengo el codigo asi:

Código:

ul.menu li {
	list-style:none;
	line-height:25px;
	border-bottom:solid #d3d3d3 1px;
	padding:0 0 0 8px;
	font-size:12px;
	margin:0;
}

ul.menu li:hover {
	background-color: #4f095A;
	color: #ffffff;		
}

ul.menu li a {
	color:#4f095a;
	text-decoration:none;
    list-style:none;
}

ul.menu li a:hover {
	color:#ffffff;
	text-decoration:none;

Muchas gracias de antemano

[jomaruro]

Hola:

Añade background-color: #4F095A al ul.menu li a:hover (tal y como tienes en el ul.menu li:hover.

Saludos.

[tetosan]

Hola,

gracias por la respuesta pero eso no me soluciona el problema, ya que pone el fondo de las letras a morado, lo cual ya lo hace al poner en la parte de li:hover{background-color: #4F095A}

Me imagino que será algo a poner en li:hover, pero por más que intento cosas no me sale como lo quiero, alguna idea mas?

[tetosan]

Hola de nuevo,

ya esta resuelto ;)

tenias razon en cuanto a lo de modificar el la parte "a" y no la parte "li", no sé porqué me había empeñado en que asi fuera...

La solucion es añadir a 'ul.menu li a' dos lineas:

width:100%;
display:block;

Con esto funciona.

Gracias de nuevo