[Ovillo] CSS a:hover que no sé hacer funcionar

[Javier Barcelona]

Hola a todas y todos.

A ver si me explico y que se me entienda  :-)))

Tengo el siguiente código XTHML:

<div id="container">
   <div id="leftmenu"></div>
   <ul id="navbar">
     <li><a href="tienda.html">Tie<strong class="resaltada">n</ 
strong>da</a></li>
     <li><a href="colecciones.html">Colecci<strong  
class="resaltada">o</strong>nes</a></li>
     <li><a href="novedades.html">Nov<strong class="resaltada">e</ 
strong>dades</a></li>
     <li><a href="contactar.html">Cont<strong class="resaltada">a</ 
strong>ctar</a></li>
   </ul>
</div>

Con este CSS:

#navbar {
	margin-top:170px;
	color:#C90;
	list-style:none;
	margin-left:235px;
	font-size:1.2em;
}

#navbar li {
	float:left;
	display:block;
	margin-left:10px;
	padding:0 4px 0 4px;
}

.resaltada {
	color:#666;
	text-decoration:underline;
}

.resaltada a:hover {
	text-decoration:none;
}

Como veis una letra de cada elemento del LI tiene un estilo diferente  
que podéis revisar en el CSS como ".resaltada". Mi idea es que al  
pasar el ratón por encima el estilo de esa letra cambie al estado que  
reflejo en ".resaltada a:hover", pero esta claro que algo no hago bien  
porque no lo logro.

¿Qué hago mal?

Gracias.

Javier