menus con css de diferentes colores

Hola.
He hecho un menu, con desplegables, siguiendo el tutorial de cristalab que funciona perfectamente, pero ahora quiero rizar el rizo y no lo consigo.

se trata de poner algunos botones del menu vertical de diferente color y que funcione corectamente.
lo que he provado sin resultado, es darle una class al li y despues en el codigo css definir para esa class otro color, pero no funciona, sigue saliendo todo del mismo color.
no se por donde tirar.

un fracmento de html.

Código :

<li><a href="#">Cultura</a> 
                  <ul>
               <li class="otrocolor"><a href="#">Aplec</a></li> 
                            <li><a href="../pessebres/index.htm">Pessebres</a></li> 
                    <li><a href="#">Música a la brasa</a></li> 
                    <li><a href="#">Gastronomia popular</a></li> 
                    <li><a href="#">Cursets varis</a></li> 
                  </ul> 
                </li>

el css

Código :

ul{
   padding:0px;
   margin:0px;
   list-style:none;
   width:100px;
   border-bottom:1px solid #666;
   }
ul li {
   position:relative;
   }
li ul {
   display:none;
   list-style:none;
   position:absolute;
   top:0px;
   left:99px;
   }
ul li a {
   display:block;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   text-decoration:none;
   color:#00f;
   padding:2px;
   background-image: url(../jpg/fons_butons3.jpg);
   background-position:0px;
   background-repeat:repeat-y;
   border:1px solid #666;
   border-bottom:0px;
   }
li a:hover {
   background-image: url(../jpg/fons_butons3.jpg);
   background-position:-100px;
   background-repeat:repeat-y;
   border:1px solid #000;
   border-bottom:0px;
   text-decoration:underline;
   color:#f00;
   }
.otocolor   {
   background-image:url(../jpg/fons_butons_actiu.jpg);
   }
/*fix IE. hide from IE mac \*/
* html ul li {float:left; height:1%;}
* html ul li a {height:1%;}
/*end*/
li:hover ul, li.over ul {
   display:block;
   }

¿es posible hacerlo ?

gracias por vuestra ayuda.
xavier.

No hace falta que crees una clase, simplemente:

Código :

ul li ul li {color:#F00;}

Con esto es suficiente para que cambien de color.
Visita esta página y encontrarás un montón de menús hechos en CSS.

Gracias ryuz por tu respuesta.

He provado el codigo y no hace nada.

Repito la pregunta mas clara:
quiero que el boton que corresponde a la pagina que este acualmente abierta sea de otro color o con otro fondo, que supongo que sera lo mismo.
eso es lo que no consigo.
¿alguna otra idea para provar?

Gracias.

Hola.
provando, provandoy mirando mucho he dado con la respuesta. la explico por si alguien tiene mi mismo problema.

simplemente he puesto una class dentro del enlace

Código :

<ul>
   <li><a href="#">Aplec</a></li> 
       <li><a href="../pessebres/index.htm" class="otrocolor">Pessebres</a></li> 
        <li><a href="#">Música a la brasa</a></li> 
        <li><a href="#">Gastronomia popular</a></li> 
        <li><a href="#">Cursets varis</a></li> 
 </ul>

y el css como sigue:

Código :

.otrocolor {
          background-color: #3f3;
          }

y asi me funciona y como dice la norma, para actualizar la pagina no hay que tocar la css.

gracias a todos.
xavier

BOFH NOTE: la proxima vez verifica que el boton Deshabilitar BBCode en este " no este marcado para poner codigo. POR FAVOR USAR LA VISTA PRELIMINAR

http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

mira en selectores

creo que el que necesitas es focus