Discussion :

[jej5189]

Bonjour,

J"ai un petit problème avec un menu déroulant.
Voici un morceau de mon menu :

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
<ul id="menu_deroulant">
	<li>
		<a href="index.php"><div id="lien_menu">Accueil</div></a>
	</li>
	<li>
		<a href="presentation.php"><div id="lien_menu">Présentation</div></a>
	</li>
	<li>
		<a href="#"><div id="lien_menu">Photos</div></a>
		<ul>
			<li>
				<a href="#"><div id="lien_menu" class="sous_menu">Téléthon</div></a>
			</li>
			<li>
				<a href="#"><div id="lien_menu" class="sous_menu">Sidaction</div></a>
			</li>
		</ul>
	</li>
<li>
		<div id="lien_menu">Infos pratique</div>
		<ul>
			<li>
				<a href="#"><div id="lien_menu" class="sous_menu">Plan d'accès</div></a>
			</li>
			<li>
				<a href="#"><div id="lien_menu" class="sous_menu">Agenda</div></a>
			</li>
		</ul>
	</li>
</ul>

Et le CSS (je le mets complet si l'erreur provient d'un endroit improbable)

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
65
66
67
68
69
70
71
72
73
#menu_deroulant, #menu_deroulant ul /* Liste */     
{
	background-color: white;
        padding : 0;
        margin-top:-5px;
        list-style : none;
		height:32px;
        line-height : 31px;
        text-align : center;
 
}
 
#menu_deroulant li,#menu_deroulant li ul li
{ 
	background-color: #c55;
    float : left; 
	padding: 0px 10px;
	width: 146px;
}
 
#menu_deroulant li ul li{
	background-color: #c55;
	border: none;
	text-align: left;
	width: 150px;
	font-size: 11pt;
}
#menu_deroulant a{
	color: white;
	text-decoration: none;
}
#menu_deroulant li:hover,#menu_deroulant li ul li:hover
{ 
	color: black;
	background-color: #fff;
}
 
#menu_deroulant a:hover, #lien:hover{
	color: black;
	background-color: transparent;
}
 
#menu_deroulant li ul
{ 
        position: absolute;
        width: 150px; 
        left: -999em; 
}
 
#menu_deroulant li ul ul 
{
        margin    : -24px 0 0 100px ;
}
 
 
#menu_deroulant li:hover ul ul, #menu_deroulant li.sfhover ul ul
{
        left: -999em;
}
 
#menu_deroulant li:hover ul, #menu_deroulant li li:hover ul, #menu_deroulant li.sfhover ul, #menu_deroulant li li.sfhover ul
{
        left: auto;
        min-height: 0;
}
 
#lien_menu{
margin-left: -10px;
margin-right:-10px; 
}
#lien_menu.sous_menu{
padding-left: 10px;
}

Je vous explique maintenant mon problème et ma démarche.
Au début le texte du <a> ne changeait de couleur qu'au dessus du mot, j'ai donc feinté en utilisant une <div> qui permet de changer la couleur. Quand je passe sur mon lien j'ai le lien en noir sur fond blanc et quand je n'y suis pas je suis en blanc sur fond roue.

Le problème c'est que si c'est un lien déroulant (ici Photos), arrivé dans le sous menu correspondant je me retrouve avec le fond blanc qui est resté du hover et l'écriture blanche du fait qu'on est pas au dessus.

A l'inverse avec "Infos Pratiques" qui n'est pas un lien je n'ai pas ce genre de problème.

J'espère avoir été assez clair et que vous pourrez m'aider.

[jej5189]

Comme je ne peux supprimer le message, pour ceux qui auraient rencontré le même problème (il y en a car j'ai trouvé la réponse en cherchant plus loin dans le forum)

il suffit de modifier le comportement du lien de la liste

Code :

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

1
2
3
4
 
#menu_deroulant #lien_menu:hover a{
      color: black;
}