¿como hacer el <li> al pasar el raton haga un efecto hover

[iniciopublic]

no se si me explico trato de hacer lo siguiente tengo una lista <ul><li> el cual al pasar el raton muestra un efecto hover el cual es de otro color el <li> pero el problema es que solo se funciona cuando la fecha del raton esta en las letras dento del <li> y no fuera

¿como haria que al pasar el raton fuera de las letras pero dentro del <li> haga el efecto hover?

este es el codigo que estoy utilizando :

.text li :hover {
text-decoration: none;
text-transform:capitalize;
display:block;
color:#ffffff;
background:#D50000;-webkit-border-radius:3px;border-radius:3px;
width: 100%;
}

[Pelipe]

Podrian ser muchos factores, la clase del padre heredada que es lo mas comun, en estos casos es mejor poner la web de ejemplo para que la veamos y asi sacar conclusiones, caso contrario es jugar al adivino, es como pedir una autopsia por chat, viendo el cuerpo del delito es más facil.

[JustinKO]

En principio te debería de funcionar ¿no tendrá que ver ese espacio que tienes entre el li y el :hover?

De todos modos hay propiedades ahí más de "a" que de "li". ¿no estarías intentando hacer a:hover y de ahí ese display:block?

Como dice pelipe, pon por lo menos la lista html, porque parece que hay alguna cosa ahí que no tendría por qué que estar.

saludos

[pzin]

De hecho el :hover en ese caso será para el enlace, u otro hijo que contenga li, precisamente por el espacio que comenta JustinKO.

Aquí lo puedes ver con más claridad: http://jsfiddle.net/8W5ff

Por otro lado lado seguramente ese width: 100% también sobre, ya que los elementos en bloque tienen un ancho automático —que realmente no es 100%—y a veces ambas cosas pueden ocasionar resultados imprevistos.