Bonjour.

J'essaie de faire un menu en CSS pour mon site.
Le résultat est consultable ici: http://dladobe.free.fr/new02/
En temps normal l'item "Accueil" du menu est désactivé et le mot "Accueil" est écrit en noir sur fonds blanc. Par contre au passage de la souris sur le mot, je voudrais que le mot soit écrit en blanc au dessus de l'image http://dladobe.free.fr/new02/images/menu-02-on.jpg

Ce que j'ai écrit marche à moitié puisque au passage du curseur sur le mot, il y a bien une partie de l'image qui s'affiche mais ce n'est qu'un affichage partiel, je voudrais que l'affichage soit similaire à celui des 3 éléments du menu en dessous de "Accueil"

Le code xhtml est le suivant:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
			<div id="menu_01">
			</div>
			<div>
				<a href="index.php"><span id="menu_02">Accueil</span></a>
			</div>
			<div id="menu_03">
			</div>
			<div id="menu_04">
				<a href="photos.php">Photos</a>
			</div>

et le code css est le suivant:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
#menu_1 #menu_01 {width: 390px; height: 20px; background: url(../images/menu-01.jpg) no-repeat;}
#menu_1 div a span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02.jpg) no-repeat;}
#menu_1 div a:hover span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02-on.jpg) no-repeat;}
#menu_1 div a:focus span#menu_02 {width: 140px; height: 40px; padding: 0 0 0 250px; background: url(../images/menu-02-on.jpg) no-repeat;}
#menu_1 #menu_03 {width: 390px; height: 20px; background: url(../images/menu-03.jpg) no-repeat;}

Si quelqu'un peut me filer un coup de main pour ce menu ce serait super sympa! Merci d'avance!