Problème insertion d'image avec le css

Bonjour,

J’ai un problème que je n’arrive pas à solutionner. Je fais un menu avec des images en guise de liens. L'image a 2 parties, une supérieure et une inférieure. La partie supérieure sera affichée par défaut, puis quand le pointeur est dessus, le css affichera la partie inférieure de la même image. Pour en arriver là, il faut d’abord que l’indication d’afficher l’image soit dans le css, mais elle ne s’affiche pas (le chemin est pourtant correct)!

Voici le css pour la première image (le lien et l'affichage supérieur/inférieur ne sont pas encore traité ici) :

#nav{margin:0; padding:0;}
#nav li {display:inline; padding:0; margin:0;}
.menu{float:left; display:inline; margin-right:10px; width:830px;}
.menu ul {clear:right;}
.menu ul li {float:right;} /*avec .menu ul {clear:right;} permet de centrer le menu*/
#nav_ac_1 {width:120px; background-image:url('../img/image_1.jpg');}

Et le html :
<div class="menu">
<ul id="nav">

<li id="nav_ac_1">
<!--là,je ne mets rien, puisque le css affiche l’image-->
</li>

<li id="nav_ac_2">
<img src="../img/image_1.jpg" /><!--là,j’ai mis la même image pour m’assurer que le chemin est bon, et elle s’affiche bien, donc OK-->
</li>

</ul>
</div>
Pouvez-vous m'aider sur ce sujet ?
D'avance merci,
tOOnie