Probleme de barre menu (image hover)

Bonjour,

Bonjour,

voilà, je crée une barre menu en ce moment même. La voici:

HTML
<nav><a href="news.html";><img src="file:///C:/wamp/.../news.png " class="news"/></a>
<a href="chroniques.html";><img src="file:///C:/wamp/www/.../chroniques.png" class="chroniques"/></a>
<a href="bio.html";><img src="file:///C:/wamp/www/.../bio.png" class="bio"/></a>
<a href="clips.html";><img src="file:///C:/wamp/www.../clips.png" class="clips"/></a>
<a href="forum.html";><img src="file:///C:/wamp/www/.../forum.png" class="forum"/></a></nav>

CSS
nav
{width: 677px;
/*toujours penser à mettre une taille au block, de façon à pouvoir le centrer correctement*/
margin-top: 180px;
margin-left : auto;
margin-right : auto;}

Comme vous pouvez le voir j'ai utilisé des png pour recrée les bouton de mon menu
j'aimerais qu'ils puissent changer de couleur lorsque je place mon curseur dessus, Jai donc utilisé la fonction Hover comme ceci:

ex:
.news:hover
{background-image: url(file:///C:/wamp/www/.../newshover.png);}

Mais comme vous vous doutez bien le bouton Hover c'est placé en dessous du bouton "news" :/

j'aimerais de l'aider s'il vous plait.
Merci :)