Recomendaciones para css en un menú.

[haga41]

Buenas noches,

Tengo un menú en una web, que está compuesto por un div con un ulk y varios li, cada li tiene un texto que es a su vez un enlace. El caso es que estoy pensando la forma de hacer que cambie a la vez el colro de fondo del li y el del texto del link, ya que tal y como lo tengo ahora, al ponerme encima del li, cambia su color de fondo pero si no estoy justo encima del texto con el enlace no cambia el color del texto.

Pongo unas imágenes y los css a ver si se entiende mejor.

Código HTML:

<div id="contenedor">
	<div id="columnaizquierda">
    	<ul>
            <li class="col1">
            	<a href="../index.asp">Inicio</a></li>
            <li class="col1">
            	<a href="../noticiasDiv.asp">Noticias</a></li>
            <li class="col1">
            	<a class="col1" href="../pruebasDiv.asp">Pruebas</a></li>
            <li class="col1">
            	<a href="../contacto.asp">Contacto</a></li>
            <li class="col1">
            	<a href="../comparativaDiv.asp">Comparativa</a></li>
            <li class="col1">
            	<a href="../linksDiv.asp">Links</a></li>
            <li class="col1">
            	<span class="col1"><a href="../usuariosDiv.asp">Zona de usuarios</a></span></li>
         </ul> 

Estilo.css

Código HTML:

#columnaizquierda{
	float: left;
	width: 170px;
	margin-top:4px;
	margin-left: 3px;
	margin-right: 3px;
	text-align: left;
	/*padding: 2px;*/
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	/*background-color:#000000;*/
	list-style-type: none;
	color:#FFFFFF;
	height:360px;
}
#columnaizquierda ul{
	list-style-type: none;
	background-color:#FFFFFF;
	color:#FFFFFF;
	margin:0px;
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px
	vertical-align:top;
}
#columnaizquierda ul li{
	background-color:#800001;
	color:#000000;
	padding:3px;
	margin-bottom:4px;
	margin-left:0px;
	margin-right:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 1px solid #000000;
	text-align:left;
	width:162px;
	list-style-type: none;
	text-decoration:none;
	font-weight:bold;
}
.col1 a{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:link{
	color:#FFFFFF;
	text-decoration:none;
}
.col1 a:hover{
	color:#800001;
	text-decoration:none;
}
#columnaizquierda ul li.col1:hover, #columnaizquierda ul li:hover {
	background-color:#FFFFFF;
	color:#80001;
	list-style-type: none;
	text-decoration:none;
}
#columnaizquierda ul li.col1:a, #columnaizquierda ul li:a {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}
#columnaizquierda ul li.col1:link, #columnaizquierda ul li:link {
	background-color:#800001;
	color:#000000;
	text-decoration:none;
}

Aquí pongo las imágenes, la primera es el menú tal cual aparece sin tocar nada, la segunda es el hover del li sin tocar el texto, la tercera es el hover encima del link del texto. Lo que quiero saber es si puedo hacer que el texto del link cambie de color al ponerme en el li o si solamente tengo que elegir un color para el texto que sea visible en los 2 estados, negro por ejemplo y ya está.

http://i524.photobucket.com/albums/cc328/s7474/css.jpg

Agradecería mucho cualquier ayuda o sugerencia.