Discussion :

[vince351]

Bonjour à tous,

Je suis en train de faire un menu horizontal déroulant à base d'image et de CSS.

voila le rendu :

lorsque la souris est sur catalogue :


lorsque la souris est sur un des sous items de catalogue :


Mon problème est que lorsque la souris est sur un des sous items (cas de l'image 2), je voudrais que l'image reste sur "Catalogue" comme pour la première image. Je me demande si c'est possible avec des CSS .

le code HTML :

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
<div id="menu">
<ul>
  <li><a href="../index.php">Accueil</a></li>
 
  <li><a  rel="dropmenu1" href="../toutesLesOffres.php">Catalogue</a>
  <ul>
      <li><a href="#t">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
 
  </li>
 
  <li><a href="../monEspace.php">MON ESPACE</a></li>
 
  <li><a   href="../Communaute/index.php">COMMUNAUTE</a></li>    
 
  <li><a href="../forum/index.php">Forum</a></li>
 
  <li><a href="../faq.php">FAQ</a></li>
</ul>
</div>

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
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 ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
 
 
#menu li {
 float:left;
 margin:auto;
 padding:0;
 color: #FFFFFF;
 }
 
 
 
#menu li a {
	background-image: url(images/menuFond.png);
	background-position: center bottom;
	clear:none;
	width: 130px;
	height:26;
	display:block;
	color: #257708;
	text-decoration: none;
	text-transform: uppercase;
	clip: rect(auto,auto,auto,auto);
	text-align: center;
	font-size: 18px;
	padding-top: 9px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
	font-weight: bold;
}
 
 
#menu li a:hover {
	background-image: url(images/boutonVert.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
}
 
#menu ul li ul {
 display:none;
}
 
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
}
 
#menu ul li ul li a {
background-image:none;
color:#000;
background-color:#090;
font-size: 12px;
}
#menu ul li ul li a:hover {
background-image:none;
color:#FFF;
}
 
#menu li ul {
 position:absolute;
}

Quelqu'un à une idée ?

[icareo]

essayes ça :

Code :

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

1
2
3
4
5
#menu ul li ul li a:hover>#menu li a {
	background-image: url(images/boutonVert.png);
	background-repeat: no-repeat;
	color: #FFFFFF;
}

je suis pas un pro du css donc ça marchera peut-être pas du premier coup, mais c'est du coté du sélecteur d'enfant qu'il faut que tu te penches à mon avis...

[Macmillenium]

Bonjour,

Plutôt :

Code css :

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

1
2
3
4
5
 
#menu li:hover > a {
	background : url(images/boutonVert.png) no-repeat;
	color: #FFFFFF;
}

En sélectionnant l'enfant direct.
Cependant, ce code ne fonctionne pas sous IE6 pour deux raisons :
- N'implémente pas le sélecteur d'enfants directs ;
- :hover ne fonctionne que sur les éléments A.

[vince351]

Merci pour vos réponses, la méthode Macmillenium fonctionne . J'ai pu tester sous IE8, cela fonctionne aussi. Sous IE6, le menu principal est visible, les sous menu ne le sont pas, ce n'est pas si grave puisque cela n'empêche pas la navigation sur mon site et IE6 commence à se faire rare. Je n'ai pas d'IE7 sous la main pour tester, tu me confirme que cela devrait fonctionner sous IE7?

[Macmillenium]

les sous menu ne le sont pas, ce n'est pas si grave puisque cela n'empêche pas la navigation sur mon site et IE6 commence à se faire rare.

Bien vu.

tu me confirme que cela devrait fonctionner sous IE7?

Oui.