Bonjour,
J'ai mis en place un menu déroulant vertical avec au survol des elements du menu et des sous-menus une coloration (en l'occurence orange).
J'aimerais lorsque je survole un sous-menu, que le menu correspondant reste coloré.
Comment faire?
Merci de votre aide.
Voici le code HTML et CSS du menu
Code HTML
Code CSS
Code : 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 <div id="menu"> <ul> <li class="current_page_item"><a href="index.html">Accueil</a></li> <li><a href="presentation.html">Qui sommes-nous ? </a> <ul class="sous-menu"> <li> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li> <li> <a href="notreConcept.html"> Notre concept </a></li> <li> <a href="nosValeurs.html"> Nos valeurs </a></li> </ul> </li> <li><a href="polygonum.html">Le polygonum </a> <ul class="sous-menu"> <li> <a href="originePoly.html"> Les origines du polygonum </a></li> <li> <a href="composantsPoly.html"> Les composants du polygonum </a></li> </ul> </li> <li><a href="http://www.moraz.fr/pages/Produit02SoinPeau.php" target="_blank">Commander le produit </a></li> <li><a href="contact.html">Nous contacter</a></li> <li class="last"><a href="http://www.moraz.fr" target="_blank">Nos autres produits</a></li> </ul> <br/><br/> </div>
Code : 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64 #menu { background-color : #FFFFF3; width : 1000px; margin : auto; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; padding: 11px 14px 11px 14px; background-color : rgb(123, 143, 56); text-decoration: none; text-transform: uppercase; text-align: center; font-family: 'Oswald', arial narrow, sans-serif; font-size: 15px; font-weight: 200; color: #FFFFFF; border: none; } #menu .current_page_item a { background: rgb(246, 169,36); } /***********************Sous menu************************/ #menu ul li li { /* on enlève ce comportement pour les liens du sous menu */ display: inherit; } #menu ul ul { position: absolute; /* on cache les sous menus complètement sur la gauche */ left: -999em; } #menu ul li:hover ul { /* Au survol des li du menu on replace les sous menus */ left: auto; } #menu a:hover { background: rgb(246, 169,36); } #menu ul li ul li:hover a{ background : black; }
Partager