Problème d'affichage d'image en hover dans une liste

J'ai fait deux petits test. Quand je met mon background image dans la ligne

Code:

---

#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid; background-image:url(blanche.png);}

---

J'ai bien l'image qui s'affiche en répétition dans le haut du menu, et quand je met no repeat je n'ai plus d'image.

J'ai essayé de faire la même chose dans la case li.fond mais rien n'y fait, avec ou sans repeat.

J'ai aussi essayé en changeant seulement la couleur de fond (sans l'image) de li.fond mais là aussi tjrs pas d'effet. Je me demande si les lignes plus bas dans le CSS ne prennent pas le dessus?

Essayes de mettre le width et le height.

Citation:

---

Code:

---

<li class="sousmenu , plop"><a href="lien">nom1</a></li>

---

---

cette notation n'est pas correcte, il ne faut pas utiliser de , pour séparer les classes mais un espace :

Code:

---

1 2	<li class="sousmenu plop"><a href="lien">nom1</a></li>

---

Citation:

---

Envoyé par Meloooo

Essayes de mettre le width et le height.

---

J'ai encore essayé sans succès. Mais je pense de plus en plus que l'erreur vient dans le façon dont j'écris dans ma class .fond.

Car si je met l'image dans la ligne ci dessous de mon code CSS j'ai bien les images qui s'affiche en fond dans tout le sousmenu niveau 3 et pareil pour le niveau 2.

#menu ul.niveau3 li {background: #9BBBCF;text-align: center;}

Mais c'est seulement dans ma class .fond que ça ne marche pas. Par contre quand je met l'image en dimension 20px 20px la case se rétrécie c'est donc qu'il y a bien "un effet" sur la class .fond. Comme si l'image était là mais derrière.

J'ai finalement abandonné l'idée de faire ça dans le css et j'ai mis les images dans le html.

Le résultat? Et bien j'arrive à voir mes deux images (je les ai décalées pour les voir toutes les deux) et aussi à les placer ou je veux dans le menu li en jouant sur les valeurs ci dessous.

Donc avec un display sur flèchenoire je masque mon image pour que seule la flècheblanche s'affiche (ceci fonctionne).

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

#flècheblanche { position:absolute; left: 62%; top: 25%; }     #flèchenoire { display: none; position:absolute; left: 62%; top: 25%; }

---

Ma question est la suivante: Comment pourrais je faire à partir de là pour ré afficher flèchenoire si ma souris passe au dessus de li.fond.

Code:

---

1 2 3

#menu ul.niveau3 li:hover.fond { ? }

---

Merci à vous pour votre aide!