Menu accordéon et background image

Bonjour,

J'ai suivi le tuto menu accordéon, tout fonctionne aucun problème

Par contre, j'essaie de le modifier visuellement, et malgré de nombreux essais j'ai du mal à obtenir ce que je veux

Je voudrais mettre pour chacune de mes li un icon en background différent, ça j'ai réussi
Mais, en essayant de conserver comme sur le tuto d'origine une couleur en background différent selon que le li est open ou non, et bien je n'y arrive pas!

Côté html j'ai juste ajouté une class au li:

<li class="toggleSubMenu exemple"><span>Exemple</span>

En css voilà ce que ça donne, en plus du code d'origine, j'ai donc rajouté des class pour les background: exemple:

ul.navigation .exemple a, ul.navigation .exemple span{
    background: url(/images/bibi.png) 10px 5px no-repeat;
	padding-left:40px;
}

Avec ça, j'obtiens bien l'image bibi en background, mas du coup, lorsque je passe la souris dessus pas de changement de couleur en background, et lorsque le li est open même chose...

J'ai essayé de retirer le span et le a, en me disant qu'en ajoutant seulement l'image en background le reste serait conservé, comme ça:

ul.navigation .exemple {
    background: url(/images/bibi.png) 10px 5px no-repeat;
	padding-left:40px;
}

mais non, ça ne marche pas non plus

Avez-vous une idée?
Merci d'avance pour votre coup de main

Salut,

Tu n'as pas la même class dans le HTML et le CSS.
Y a pas de li dans ton CSS
Modifié par jmlapam (28 Oct 2011 - 16:45)

Si, y'a pas le li mais .exemple est un li
j'ai pas voulu mettre tout le css pour pas encombré le message et parce le css de base est celui du tuto
Modifié par Piuu (28 Oct 2011 - 17:33)

Bonjour,

jmlapam a écrit :
Tu n'as pas la même class dans le HTML et le CSS.

Il me semble que si. Dans l'extrait de code HTML donné le LI porte les classes "toggleSubMenu" et "exemple" (séparées par un espace, ce qui est la notation standard pour des classes multiples en HTML), et dans le sélecteur CSS c'est bien ".exemple" qui est utilisé. Pas de souci de ce côté.
Et bien sûr, rien n'oblige à utiliser le nom d'un élément dans un sélecteur CSS. Des sélecteurs tels que "#bidule", ".machin", ".foo .bar", etc. sont tout à fait valides et fonctionnels (du moment qu'ils visent les éléments souhaités).

Piuu a écrit :
lorsque je passe la souris dessus pas de changement de couleur en background, et lorsque le li est open même chose...

Est-ce que tu as utilisé un outil d'inspection du DOM tel que Firebug ou Web Inspector pour vérifier sur chacun de tes éléments (notamment A, SPAN et LI) quels sont les styles appliqués, et si certains styles sont écrasés par d'autres par exemple?

Si tu n'as pas l'habitude de ces outils, bah il faut s'y mettre.