Color en submenú diferente al de la lista

[NaRanJiTo78]

Hola!

Tengo el siguiente menú:

.menu { width: 170px;
}

ul a {
text-decoration: none;
color: #991A23;
}
ul {
list-style: none;
width: 170px;
padding: 0;
margin: 5px;
color: #777;
}

li {
position: relative;
margin-bottom:4px;
color: #991A23;
}

li ul {
display: none;
font-size:14px;
color:#999;
}

li>ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul {
display: block;
}

y html:

<div id="menu">
<ul>
<li><a href="#">Inicio</a>
<ul>
<li><a href="#">Tema1</a></li>
<li><a href="#">Tema2</a></li>
<li><a href="#">Tema3</a></li>
<li><a href="#">Tema4</a></li>
</ul>
</li>
<li><a href="#">Varios</a>
<ul>
<li><a href="#">Tema1</a></li>
</ul>
</li>
<li><a href="#">Varios2</a></li>
<li><a href="#">Varios3</a></li>
<li><a href="#">Varios4</a></li>
<li><a href="#">Varios5</a></li>
</ul>
</div>

El color general, es granate. Como podría hacer, para que los elementos del submenú, al desplegarse(Tema1,Tema2...) estuviesen exclusivamente en gris, y al pasar por encima, en granate?

Un saludo, muchas gracias!

[daidalos]

li a{
display: block
color: #CCC;
}

li a:hover{
color: #991A23;
}

agrega estos y me dices como te fue

[NaRanJiTo78]

Hola daidalos, gracias por tu respuesta.

El caso esque me sigue saliendo todo en gris, tanto el menú como el submenú, y al ponerme encima de cualquiera, en granate...solo quiero en gris el submenú, es posible?

Muchas gracias

[C2am]

Hola
Prueba de esta manera:

Código CSS:

li ul li a{
    color: #CCC;
    }
li ul li a:hover{
    color:#991A23;
    }
 

Seguro que hay una mejor forma, y no entendi algunas cosas que tienes en tu css pero no soy un experto en el tema.

Supongo que ya lo conoces pero igual te dejo un link que me ha servido un monton:
www.librosweb.es

saludos

[NaRanJiTo78]

ole c2am!!

muchas gracias colegui!!

ahí va ese karma (y para daidalos tb por ayudarme)

Gracias de nuevo :D