Pb Menu Bouton XHTML / CSS

Bonjour,

Je viens d"apprendre le xhtml/css et j'ai donc dessiné de créer un site.
Mais la, je viens de rencontrer un problème. J'aimerai créer un menu avec des bouton (sa c est fait) et j'aimerai aussi lorsque la sourie passe sur un bouton que ce bouton change de couleur (je fonctionne avec une image ou la première ligne est celle des bouton "a l'état normal", la secoude lors du passage de la sourie et la troisième lorsque je clique sur un bouton).

Pourriez-vous me dire ce qui manque dans mon code pour que cela fonctionne.


code xhtml:


<!-- Boutons -->

<div id="menu">
<ul>
<a class="bnt_acceuil" href="Start-Gaming.html" title="Aller à la page d'acceuil"></a>
<a class="bnt_tutos" href="Tutos.html" title="Tutoriels pour débutants"></a>
<a class="bnt_tests" href="Tests.htlm" title="Tous nos test de jeux videos"></a>
<a class="bnt_projets" href="Projets.html" title="Les projets du site"></a>
<a class="bnt_autres" href="Autres.html" title="Autres doccuments inclassables"></a>
</ul>



code css:

body
{
width: 780px;
margin: auto;
margin-top:10px;
margin-bottom: 10px;
background-color: #00c0ff;
background-image: url("");
background-repeat: repeat-x;
}


/* Le menu (bouton normal)*/
#menu

a.bnt_acceuil
{
float: left;
width: 100px;
height:30px;
background-image: url(Images/bouton.png);
}

a.bnt_tutos
{
float: left;
width: 100px;
height:30px;
background-image: url(Images/bouton.png);
background-position: -100px 0px;
margin-left: 2px;
}

a.bnt_tests
{
float: left;
width: 100px;
height:30px;
background-image: url(Images/bouton.png);
background-position: -200px 0px;
margin-left: 2px;
}

a.bnt_projets
{
float: left;
width: 100px;
height:30px;
background-image: url(Images/bouton.png);
background-position: -300px 0px;
margin-left: 2px;
}

a.bnt_autres
{
float: left;
width: 100px;
height:30px;
background-image: url(Images/bouton.png);
background-position: -400px 0px;
margin-left: 2px;
}

/* au passage de la sourie */

a:hover bnt_acceuil
{
background-position: 0px -30px;
}

a:hover bnt_tutos
{
background-position: -100px -30px;
}

a:hover bnt_tests
{
background-position: -200px -30px;
}

a:hover bnt_projets
{
background-position: -300px -30px;
}

a:hover bnt_autres
{
background-position: -400px -30px;
}


J'espère que vous pourriez m'aider.