bonjour,
je cherche une solution au probléme d'un menu déroulant horizontal qui lorsqu'il se deploie il est voilé par une div ce qui annule l'effet du survole, resultat pas de menu deroulant?!
aidez moi SVP.
bonjour,
je cherche une solution au probléme d'un menu déroulant horizontal qui lorsqu'il se deploie il est voilé par une div ce qui annule l'effet du survole, resultat pas de menu deroulant?!
aidez moi SVP.
Bonsoir,
sans la totalité du code (HTML et CSS) ou mieux une page en ligne, il va être difficile de diagnostiquer le problème.
D'autre part tu dois nous dire sur quels navigateurs tu rencontres ce problème.
voilà l'exemple:
pour le naviguateur j'utilise IE7.
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
74
75
76
77
78
79
80 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>menu horizontal</title> <!--[if !IE]> <--> <style type="text/CSS"> #menu li ul { position:absolute; top:30px; } </style> <!--><![endif]--> <!--[if IE 8]><--> <style type="text/CSS"> #menu li ul { position:absolute; } </style> <!--><![endif]--> <style type="text/css"> #menu ul { margin:0; padding:0; list-style-type:none; text-align:center; } #menu li { float:left; margin:auto; padding:0; background-color:black; } #menu li a { display:block; width:100px; color:white; text-decoration:none; padding:5px; } #menu li a:hover { color:#FFD700; } #menu ul li ul { display:none; } #menu ul li:hover ul { display:block; } #menu li:hover ul li { float:none; } #menu { height:50px; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a> <ul> <li><a href="#">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="#">Item 3</a></li> </ul> </div> <div style="border-left:solid 3px red; width:500px; height:150px;"> This how we do a horizontal menu deroulant</div> </body> </html>
Normal que ça ne fonctionne pas, tu ne réserves le positionnement absolue qu'aux navigateurs hors IE et IE8 via les commentaires conditionnels.
Tu n'as pas besoin de commentaires conditionnels ici.
ça fonctionne avec ce code CSS (j'ai enlevé certaines déclaration inutiles comme les marges latérales auto) :
Es tu conscient que le menu ne se déroulera pas sous IE6?
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 <style type="text/css" media="screen"> <!-- #menu {height:50px;} #menu li ul { position:absolute; top:29px; left:0 } #menu ul { margin:0; padding:0; list-style:none; text-align:center; } #menu > ul > li { float:left; background:black; position:relative } #menu li a { display:block; width:100px; padding:5px; background:black; color: #FFF; text-decoration:none; } #menu li a:hover {color:#FFD700;} #menu ul li ul {display:none;} #menu ul li:hover ul {display:block;} --> </style>
Si tu vises IE6, il faudra faire certaine adaptations au niveau des styles et passer par du JS.
je te remercie,
en fait je sais que le hover n'existé avec ie6 que pour la balise a, donc il est inutile de faire des menu en css uniquement? n'est ce pas?
je te merci bien, ton aide m'été vraiment utile.
je vais refaire les choses avec du js comme ca j'eviterai les éventuelles problémes.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager