Como cambiar el color de texto en una lista cuando paso el mouse por arriba

[pouparo]

Hola, tengo un problema, estoy haciendo un menu con css, estoy aprendiendo y tengo algunos ejercicios de practica, quiero hacer un menu, que cuando paso el mouse por arriba cambie de color, pude hacerlo bien con el link y con el fondo del texto pero no puedo lograr que el texto cambie si paso por arriba del recuadro, pero sin pasar por el texto.

es decir, si toca el texto el puntero, si cambia, pero si toca el area, cambia el color de fondo pero no el del texto
Quiero que el texto se ponga negro cuando paso el cursor, ya que antes es blanco y al pasar el cursos por el area, se pone el area blanca y de esa manera no se lee el texto. Si paso justo sobre el texto, logro que funciones, pero si paso sobre el area, el area cambia a blanca, pero el texto no cambia a negro..

Esto es lo que arme..

#barra ul{
margin:0;
padding:0;
}

#barra ul li:hover {
background-color:white;
cursor: pointer;
font-size:107%;
color:black;
}

#barra li{
border-width: 0px;
display:inline;
font-weight:bold;
height:40px;
width:128.574px;
background-color:#B40404;
float:left;
text-align:center;
text-decoration:none;
margin:0;
padding-top:10px;

}


A:link {
text-decoration:none;
color:white;

}

A:visited {
text-decoration:none;
color:white;
}

A:hover{
text-decoration:none;
color:black;
}

Agradezco su ayuda, se que puede tener otros errores porque estoy aprendiendo!