Couleur listes et sous-listes

**Perceuse-Killer** · 21/05/2010, 11h24

Bonjour à tous,

Je rencontre un pépin depuis un moment avec les listes.

Je m'explique, j'ai un menu composé de catégories et de sous-catégories qui se présente sous la forme suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="categories">
<ul>
         <li><a href="#">Bas - Collants</a></li>
            	<ul style="display: none; list-style-type: none; margin: 0pt;" id="smenu1">
		        <li><a href="/bas-collants/collants/">Collants</a></li>
                        <li><a href="/bas-collants/bas/">Bas</a></li>
                 </ul>
</ul>
</div>

Je souhaiterais afficher la catégorie Bas - Collants en blanc, et les sous-catégories Collants, Bas en noir et qu'au survol les éléments changent de couleur.

J'ai bien essayé ce code mais tous les éléments sont de la même couleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#categories li a { 
color:#fff;
}
#categories li a:hover, li a:focus, li a:active {
	color:#e694c2;
}
#categories li li a {
	color:#000;
	font-size:11px;
}
#categories li li a:hover, li li a:focus, li li a:active {
	color:#CCC;
}

Merci par avance pour vos conseils.

Cordialement.

Perceuse-Killer

**Dionyzos** · 25/05/2010, 12h47

Salut Perceuse-Killer,

Avec ce code ca devrait mieux marcher :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Test</title>
        <style type="text/css">
        BODY { background-color: #ddd; }
 
        #categories UL LI A { color:#fff; }
        #categories UL LI A:hover,
        #categories UL LI A:focus,
        #categories UL LI A:active { color:#e694c2; }
 
        #categories UL UL LI A { color:#000; font-size:11px; }
        #categories UL UL LI A:hover,
        #categories UL UL LI A:focus,
        #categories UL UL LI A:active { color:#888; }
        </style>
    </head>
    <body>
 
        <div id="categories">
            <ul>
                <li><a href="#">Bas - Collants</a></li>
                <ul id="smenu1">
                    <li><a href="/bas-collants/collants/">Collants</a></li>
                    <li><a href="/bas-collants/bas/">Bas</a></li>
                </ul>
            </ul>
        </div>
 
    </body>
</html>

J'espère avoir répondu à ton problème

**Perceuse-Killer** · 27/05/2010, 13h59

Bonjour Dionyzos,

Un très grand merci pour ta réponse et ton aide, ça tourne du tonnerre !

Excellente journée.

Très cordialement.

Perceuse-Killer

Couleur listes et sous-listes

CSS

Discussions similaires

Partager

Partager