Classes CSS pour menu de navigation [Fermé]

Bonjour,

Sur mon site web, j'ai le menu de navigation suivant :

<div id="navigationbar">
<ul id="navlist">
<li class="active"><a href="home-fr.html">Accueil</a></li>
<li class="inactive"><a href="services-fr.html">Traduction</a></li>
<li class="inactive"><a href="copywriting-fr.html">Copywriting</a></li>
<li class="inactive"><a href="aboutus-fr.html">A propos</a></li>
<li class="inactive"><a href="contact-fr.html">Contact</a></li>
</ul>
</div>

Avec les propriétés CSS suivantes pour le comportement des boutons :

.active a{font-size: 1em; background-color:#333333; color:#ffffff; text-decoration: none;}
.active a:hover {font-size: 1em; background-color: #333333; color: #ffffff; text-decoration: none;}
.inactive a:link {font-size: 1em; background-color:#666666; color:#FFFFFF; text-decoration: none;}
.inactive a:visited {font-size: 1em; background-color: #666666; color:#FFFFFF; text-decoration: none;}
.inactive a:hover {font-size: 1em; background-color: #999999; #ffffff; text-decoration: none;}

J'aimerais donner une couleur différente à chaque bouton, rendre le bouton correspondant actif sur la page concernée et avoir une couleur en HOVER qui s'apparente à celle du bouton (je ne peux donc pas spécifier une même couleur pour tous les boutons en HOVER).

Quelqu'un peut me dire comment faire en utilisant les classes/sous-classes ? Merci beaucoup!