MENU COULEUR ARC-EN-CIEL

[omzen]

j'ai un menu horizontal installé dans mon site. jusque là tout est ok.
Mais je souhaiterai rendre chaque titre avec une couleur différente.
Et là ça se complique pour moi qui suis débutant.

J'ai trouvé qu'il faudrait mettre une class différente pour chaque titre concerné mais je ne parviens même pas à faire fonctionner le premier (index=A C C U E I L)

quelqu'un pourrait m'aider dans la mise en place de cette procédure fastidieuse ??

le menu tel qu'il est aujourd'hui est ici http://www.coeuraccords.com

CI dessous, le code html du menu

<!-- MENU DE LA PAGE -->
  </div>
<div ul id="menu"><li>
                <a href="index">A C C U E I L</a>
                <ul>
                        <li><a href="qui-sommes-nous" class="specialmenu1>qui sommes nous</a></li>
                        <li><a href="charte">notre charte</a></li>
                        <li><a href="ethique">notre éthique</a></li>
                        <li><a href="adhesion">adhésion</a></li>
      </ul>
    </li>
        
        <li>
                <a href="#">D A N S E</a>
                <ul>
                        <li><a href="danse-buto">danse buto</a></li>
                        <li><a href="danse-adaptee">danse adaptée</a></li>
                        <li><a href="chorecologie">chorécologie</a></li>
          </ul>
</li>
                   
        <li>
                  <a href="#">T H E A T R E</a>
                <ul>
                        <li><a href="theatres">théâtre corporel</a></li>          
                        <li><a href="marionnettes">marionnettes</a></li>
          </ul>

</li>
                        
              <li>
               <a href="#">C I R Q U E</a>
                <ul>
                        <li><a href="clown">clown</a></li>
                        <li><a href="acrobatie">acrobaties</a></li>
            </ul>
    </li>
        
        <li>
                 <a href="#">S P E C T A C L E</a>
                <ul>
                        <li><a href="galerie-photos.html">photos</a></li>
                        <li><a href="videos.html">vidéos</a></li>
          </ul>
    </li>
        
              <li>
                 <a href="#">M I E U X - E T R E</a>
                <ul>
                        <li><a href="art-therapie">art-thérapie</a></li>
                        <li><a href="danse-therapie">danse-thérapie</a></li>
                </ul>
    </li>
           
<li>
                <a href="#">C O N T A C T</a>
                <ul>
                        <li><a href="contactez-nous">nous contacter</a></li>
                        <li><a href="partenaires">nos partenaires</a></li>
                          <li><a href="temoignages.php">témoignages</a></li></ul></div>

<!-- fin du menu horizontal déroulant -->

CI dessous, le code CSS du style de la page + du menu

#menu, #menu ul /* Liste */     
{
    padding : 0; /* pas de marge intérieure */
    margin : 0; /* ni extérieure */
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 30px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
    font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
    height: auto;
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 120px; /* largeur */
}

#menu li /* Elements des listes */      
{
    float : right;
    /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
    clear: right;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
    height: 30px;
    width: 119px;
    float: left;
    display: block;
    border: 1px outset #4D5C15;
    clear: right;
    z-index: 20;
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 120px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul ul 
{
        margin    : -22px 0 0 140px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 0px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

#nav a.specialmenu1        
{
    color        : #FFF;
    background-color: #F00;
}

#nav a.special:hover
{
    color        : #F00 ;
    background    : #FFF ;
}

Des conseils et des éclairages seront les bienvenus...