Problème de surbrillance

DoumCSS · 12/12/2011, 23h14

Bonjour! Je suis tout nouveau sur le forum et je me souhaite la bienvenue!

J'ai un menu CS vertical dans lequel je ne sais aucunement comment conserver la surbrillance des sous-menus (multi-niveaux).

Pour être plus clair, sur un :hover de la souris, la surbrillance fonctionne mais lorsque je passe au sous-menu suivant, la surbrillance du menu précédent disparait.

Voici le 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#backgroundHolder {width:100%; margin:0 auto;}
.nav,
.nav ul{border:0;list-style-type:none; margin:0; padding:0;}
.nav a {text-decoration:none;}
.nav {font-family: Arial, Helvetica, sans-serif; font-size:10px; margin:0; border:0px;}
 
.nav a {background-color:#000000;} 
 
.nav a b {background-color:#bb0000; color:#ffffff; font-weight:bold; display:block; padding:5px 10px;}
.nav a:hover b {background-color:#000000; color:#dd0000; cursor:pointer;}
.nav .fly .main b {background: url(images/arrow-menu.gif) no-repeat right center;}
.nav .down b {background: url(images/arrow-menu.gif) no-repeat right center;}
 
.nav ul {top:-28px;} 
 
.nav .drop,
.nav a {width:150px;}
.nav ul li {max-width:150px;} /* IE8 */
 
.nav ul {left:150px;}
 
.nav a {margin-right:-149px;} 
 
.nav li {float:left; clear:left;} 
.nav ul {float:left; position:relative; z-index:20;} 
.nav a {position:relative; display:block;} 
.nav a.main {float:left; 
    margin-top:10000px;} 
.nav .drop,
.nav .fly {margin-top:-10000px;} 
.nav ul {margin-bottom:-5000px;} 
 
.nav a:hover,
.nav a:focus,
.nav a:active {margin-right:0; z-index:10; outline:0;}
 
.nav a:focus b,
.nav a:active b {background-color:#000000; color:#dd0000;} 
 
/* OPERA */
.nav ul:hover {clear:left;} 
 
/* IE5-7 */
.nav .fly {width:100%;}
a:active {}

Et voici le HTML (Si ça peut servir...) :

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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div id="backgroundHolder">
	<ul class="nav">
		<li class="drop"><a class="main down" href="#url"><b><img height="28" border="0" align="middle" src="images/classements.bmp">&nbsp;&nbsp;&nbsp;Classements</b></a>
			<ul>
				<li class="fly"><a class="main" href="#url"><b>VolleyBall Intérieur</b></a>
					<ul>
						<li class="fly"><a class="main" href="#url"><b>Centre Jean-Noël Trudel</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Féminin (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Jeudi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Vendredi)</b></a></li>						
							</ul>
						</li>
						<li class="fly"><a class="main" href="#url"><b>Centre Landry</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Féminin (Mardi)</b></a></li>						
							</ul>
						</li>
					</ul>
				</li>
				<li class="fly"><a class="main" href="#url"><b>Beach Volley</b></a>
					<ul>
						<li class="fly"><a class="main" href="#url"><b>Bar Billard 755</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Mercredi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Mixte (Jeudi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Masc. (Vendredi)</b></a></li>						
							</ul>
						</li>
						<li class="fly"><a class="main" href="#url"><b>Parc Pie XII</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>4x4 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Mixte (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Masc. (Mercredi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Féminin (Jeudi)</b></a></li>						
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="drop"><a class="main down" href="#url"><b><img height="28" border="0" align="middle" src="images/cedule.bmp">&nbsp;&nbsp;&nbsp;Cédules</b></a>
			<ul>
				<li class="fly"><a class="main" href="#url"><b>VolleyBall Intérieur</b></a>
					<ul>
						<li class="fly"><a class="main" href="#url"><b>Centre Jean-Noël Trudel</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Féminin (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Jeudi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Vendredi)</b></a></li>						
							</ul>
						</li>
						<li class="fly"><a class="main" href="#url"><b>Centre Landry</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Féminin (Mardi)</b></a></li>						
							</ul>
						</li>
					</ul>
				</li>
				<li class="fly"><a class="main" href="#url"><b>Beach Volley</b></a>
					<ul>
						<li class="fly"><a class="main" href="#url"><b>Bar Billard 755</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>6x6 Mixte (Mercredi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Mixte (Jeudi)</b></a></li>
								<li><a class="main2" href="#url"><b>4x4 Masc. (Vendredi)</b></a></li>						
							</ul>
						</li>
						<li class="fly"><a class="main" href="#url"><b>Parc Pie XII</b></a></li>
							<ul>
								<li><a class="main2" href="#url"><b>4x4 Mixte (Lundi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Mixte (Mardi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Masc. (Mercredi)</b></a></li>
								<li><a class="main2" href="#url"><b>2x2 Féminin (Jeudi)</b></a></li>						
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Pour voir le résultat et comprendre la question, le lien de ma page est:
http://www.zonevolley.com/test_css2.php

Il s'agit du menu de gauche où on voit "Classements" et "Cédules".

Merci d'avance pour votre(vos) réponse(s) !!!!

Sekigawa · 13/12/2011, 10h58

Salut !

Tu dois pouvoir le faire à partir du javascript ou jquery... En gros si tu peux savoir lequel de tes menus est ouvert tu peux gérer la subrillance depuis ton script

Emyleen · 13/12/2011, 11h49

Il existe une bidouille en css, je vais essayer de l'écrire au mieux :

Code css :

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

1
2
3
4
5
6
7
ul.niveau1 li:hover{
    color: red;
}
ul.niveau1 li ul.niveau2 li:hover,
ul.niveau1 li ul.niveau2 li:hover > ul.niveau1 li {
    color: red;
}

Et ainsi dessuite pour les autres balises. Il suffit de prendre en compte l'arborescence de tes balises et le signe ">" comprendra si il doit remonter dans ton arborescence ou redescendre. Il me semble que ça marche en remontant, essaye de l'adapter à ton code

DoumCSS · 13/12/2011, 12h40

Probablement que je ne dois pas piger tout-à-fait... mon code devrait ressembler à ceci?

Code :

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

1
2
3
4
5
6
7
.nav ul.drop li:hover{
    color: #dd0000;
}
.nav ul.drop li ul.fly li:hover,
.nav ul.drop li ul.fly li:hover > ul.drop li {
    color: #dd0000;
}

Si oui, ça ne fonctionne pas...

Emyleen · 13/12/2011, 14h26

Excuse moi, je n'avais pas précisé, apparemment dans ton code ce sont les liens (a) qui subissent le hover, du coup il te faut appliquer la couleur aux liens et pas aux <li>.

Edit: Je viens de te faire un exemple (très moche) avec des underline

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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
}
nav {
	width: 200px;
	margin-top: 50px;
	float: left;
}
.niveau1 {
	list-style: none;
	background-color: #000000;
	border: 1px solid red;
	min-width: 200px;
}
.niveau1 li {
	height: 25px;
}
.niveau1 li:hover {
	background-color: #555555;
}
.niveau1 li:hover > .niveau2 {
	display: block;
}
.niveau1 li:hover > a {
	text-decoration: underline;
}
.niveau1 li a {
	color: #F00;
	text-decoration: none;
}
.niveau2 {
	list-style: none;
	background-color: #555555;
	border: 1px solid yellow;
	position: absolute;
	min-width: 200px;
	margin-left: 200px;
	display: none;
	margin-top: -22px;
}
.niveau2 li {
	height: 25px;
}
.niveau2 li:hover {
	background-color: #FFFFFF;
}
.niveau2 li:hover > .niveau1 li a {
	text-decoration: underline;
}
.niveau2 li:hover > .niveau3 {
	display: block;
}
.niveau2 li a {
	color: orange;
	text-decoration: none;
}
.niveau3 {
	list-style: none;
	background-color: #FFFFFF;
	border: 1px solid blue;
	position: absolute;
	min-width: 200px;
	margin-left: 200px;
	display: none;
	margin-top: -22px;
}
.niveau3 li {
	height: 25px;
}
.niveau3 li:hover {
	background-color: #06F;
}
.niveau3 li:hover > .niveau2 li a,
.niveau3 li:hover > .niveau1 li a {
	text-decoration: underline;
}
.niveau3 li a {
	color: blue;
	text-decoration: none;
}
</style>
</head>
 
<body>
<nav>
	<ul class="niveau1">
    	<li>
        	<a href="#" title="">Lien de niveau 1</a>
        	<ul class="niveau2">
            	<li>
                	<a href="#" title="">Lien de niveau 2</a>
                	<ul class="niveau3">
                    	<li><a href="#" title="">Lien de niveau 3</a></li>
                    	<li><a href="#" title="">Lien de niveau 3</a></li>
                    	<li><a href="#" title="">Lien de niveau 3</a></li>
                        <li><a href="#" title="">Lien de niveau 3</a></li>
                    </ul>
                </li>
                <li><a href="#" title="">Lien de niveau 2</a></li>
                <li><a href="#" title="">Lien de niveau 2</a></li>
            </ul>
        </li>
        <li>
        	<a href="#" title="">Lien de niveau 1</a>
        </li>
    </ul>
</nav>
</body>
</html>

En espérant que ça t'aide à comprendre

DoumCSS · 14/12/2011, 22h42

Merci Emyleen pour tes réponses!

Je dois être un gros boulet comme vous dites en Europe car je ne suis pas foutu de faire fonctionner le tout...

J'ai beau essayer toutes les liaisons possibles mais je ne m'y connais pas assez, probablement, pour réussir...

Bref, je vais continuer de travailler dessus mais je commence à trouver que j'y perds beaucoup de temps... héhé
:/

DoumCSS · 15/12/2011, 23h18

Bon et bien, c'est terminé pour moi les menus en CSS; ca ne donne rien; Si on part du fait que IE6 n'affichera jamais le menu comme il faut, aussi bien attendre que les utilisateurs de IE6 changent pour une version plus récente et donc, il faut aller vers autre chose...

13/12/2011, 10h58	#2
Sekigawa Membre éclairé Développeur Web Inscription : mars 2008 Messages : 426 Détails du profil Informations personnelles : Âge : 25 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : mars 2008 Messages : 426 Points : 316 Points : 316	Salut ! Tu dois pouvoir le faire à partir du javascript ou jquery... En gros si tu peux savoir lequel de tes menus est ouvert tu peux gérer la subrillance depuis ton script __________________ Cookie : Anciennement petit gâteau sucré, qu'on acceptait avec plaisir. Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence.
	00

14/12/2011, 22h42	#6
DoumCSS Invité de passage Inscription : décembre 2011 Messages : 34 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : décembre 2011 Messages : 34 Points : 4 Points : 4	Merci Emyleen pour tes réponses! Je dois être un gros boulet comme vous dites en Europe car je ne suis pas foutu de faire fonctionner le tout... J'ai beau essayer toutes les liaisons possibles mais je ne m'y connais pas assez, probablement, pour réussir... Bref, je vais continuer de travailler dessus mais je commence à trouver que j'y perds beaucoup de temps... héhé :/
	00

15/12/2011, 23h18	#7
DoumCSS Invité de passage Inscription : décembre 2011 Messages : 34 Détails du profil Informations personnelles : Sexe : Localisation : Canada Informations forums : Inscription : décembre 2011 Messages : 34 Points : 4 Points : 4	Bon et bien, c'est terminé pour moi les menus en CSS; ca ne donne rien; Si on part du fait que IE6 n'affichera jamais le menu comme il faut, aussi bien attendre que les utilisateurs de IE6 changent pour une version plus récente et donc, il faut aller vers autre chose...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email