Menu horizontal en CSS sans Javascript...

**Décibel** · 16/11/2008, 23h33

Bonsoir,

J'ai fais un menu horizontal, avce sous menu, sans javascript...
%ais j'ai un problème de positionement des sous menus entre IE et Firefox...

Voici le code XHTML :

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
	<ul id="menuDeroulant">
		<li>
			<a href="#">Partie 1</a>
			<ul class="sousMenu">
				<li><a href="#">1111</a></li>
				<li><a href="#">2222</a></li>
				<li><a href="#">3333</a></li>		
			</ul>
		</li>
		<li>
			<a href="#">Partie 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">2222</a></li>
                <li>
                    <a href="#">Partie 22</a>
                    <ul class="sousMenu2">			      
                        <li><a href="#">222222</a></li>
                        <li><a href="#">222222</a></li>
                        <li><a href="#">222222</a></li>
                        <li><a href="#">222222</a></li>
                        <li><a href="#">222222</a></li>
                    </ul>
				</li>
				<li><a href="#">2222</a></li>
				<li><a href="#">2222</a></li>
				<li><a href="#">2222</a></li>
				<li><a href="#">2222</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 3</a>
			<ul class="sousMenu">			      
				<li><a href="#">3333</a></li>
				<li><a href="#">3333</a></li>
				<li><a href="#">3333</a></li>
				<li><a href="#">3333</a></li>
				<li><a href="#">3333</a></li>				
				<li><a href="#">3333</a></li>
				<li><a href="#">3333</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>				
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
				<li><a href="#">4444</a></li>
			</ul>
		</li>
	</ul>

et 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
74
75
76
#menuDeroulant { 
background : #6a6458; 
width : auto; 
height : 21px; 
list-style-type : none; 
margin : 0; 
padding : 0; 
border : 0; 
position : absolute; 
} 
#menuDeroulant li { 
float : left; 
width : 150px; 
margin : 0; 
padding : 0; 
border : 0; 
} 
#menuDeroulant li a:link, #menuDeroulant li a:visited { 
display : block; 
height : 1%; 
color : #fff; 
background : #3b4e77; 
margin : 0; 
padding : 4px 8px; 
border-right : 1px solid #fff; 
text-decoration : none; 
} 
#menuDeroulant li a:hover { 
background-color : #f2462e; 
} 
#menuDeroulant li a:active { 
background-color : #5f879d; 
} 
#menuDeroulant .sousMenu { 
display : none; 
list-style-type : none; 
margin : 0; 
padding : 0; 
border : 0; 
} 
#menuDeroulant .sousMenu li { 
float : none; 
margin : 0; 
padding : 0; 
border : 0; 
width : 149px; 
border-top : 1px solid transparent; 
border-right : 1px solid transparent; 
} 
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited { 
display : block; 
color : #fff; 
margin : 0; 
border : 0; 
text-decoration : none; 
background-image : url(../yoga-images/fondTR.png); 
} 
#menuDeroulant .sousMenu li a:hover { 
background-image : none; 
background-color : #f2462e; 
} 
#menuDeroulant li:hover > .sousMenu { 
display : block; 
} 
#menuDeroulant .sousMenu2 { 
display : none; 
list-style-type : none; 
margin : 0; 
padding : 0; 
border : 0; 
position : absolute; 
margin : 15px 0 0 -5px; 
} 
#menuDeroulant li:hover > .sousMenu2 { 
display : block; 
}

Si quelqu'un peut me donner une idée !

Merci

**devyan** · 17/11/2008, 10h27

Sans indication supplémentaire je peux soupçonner un problème avec li:hover sous IE (il ne gère :hover que sur <A> il me semble)

**c_s_s** · 17/11/2008, 11h05

Bonjour,

Comme le souligne devyan, ce menu ne fonctionnera pas avec IE6. J'imagine que dans ton cas, c'est voulu (ou alors tu ne te soucies pas vraiment d'IE6).

Quoi qu'il en soit, voici le CSS légèrement modifié.
J'ai enlevé les marges du sous menu 2 pour les remplacer par des poistions et j'applique ce style seulement lorsque le sous menu 2 est apparant.

Code css :

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
ul, li {
	margin:0;
	padding:0;
	list-style-type: none;
} 
#menuDeroulant li { 
	float : left; 
	width : 150px; 
	border-right : 1px solid #fff; 
} 
#menuDeroulant li a { 
	display : block; 
	height : 1%; 
	color : #fff; 
	background : #3b4e77; 
	padding : 4px 8px; 	
	text-decoration : none; 
} 
#menuDeroulant li a:hover { 
	background-color : #f2462e; 
} 
#menuDeroulant li a:active { 
	background-color : #5f879d; 
} 
#menuDeroulant .sousMenu { 
	display : none; 
} 
#menuDeroulant li:hover > .sousMenu { 
	display : block; 
} 
#menuDeroulant .sousMenu li { 
	position:relative;	
	width : 150px; 
	border-top : 1px solid transparent; 
	border-right : 1px solid transparent; 
} 
#menuDeroulant .sousMenu li a { 
	display : block; 
	color : #fff; 
	text-decoration : none; 
	background-image : url(../yoga-images/fondTR.png); 
} 
#menuDeroulant .sousMenu li a:hover { 
	background-image : none; 
	background-color : #f2462e; 
} 
#menuDeroulant li > .sousMenu2 { 
	display : none; 	
} 
#menuDeroulant li:hover > .sousMenu2 { 
	display : block; 
	position : absolute;	
	top:-1px;
	left:151px;	
}

Testé sous IE7 - FF2 - Opera 9 - Safari 3 PC - Google Chrome

**devyan** · 17/11/2008, 11h10

La syntaxe "li > .sousMenu2" n'est pas non plus reconnue avec IE6 il me semble...

**c_s_s** · 17/11/2008, 11h45

Exact.
Les sélecteurs d'enfants ne sont pas reconnus par IE6.
Tout comme les sélecteurs adjacents ou les sélecteurs d'attributs, d'ailleurs.

**Décibel** · 17/11/2008, 22h47

Merci pour vos réponses !
Je vais essayer et je reviens vers vous...
Encore une question, comment le rendre compatible avec IE, car ce menu doit être installé sur un site largement diffusé et je n'ai aucune envie d'entrer dans des guerres de navigateurs qui ne regardent que les constructeurs et pas les developpeurs don je fais partie...

**Bovino** · 17/11/2008, 22h50

je n'ai aucune envie d'entrer dans des guerres de navigateurs qui ne regardent que les constructeurs et pas les developpeurs don je fais partie...

Détrompe-toi, ça regarde plus les développeurs que les producteurs dans la mesure où c'est toi et non Microsoft qui doit prendre en compte les différences entre navigateurs !!!

**Décibel** · 17/11/2008, 23h14

Ta réponse m'aide beaucoup, merci !!!

Menu horizontal en CSS sans Javascript...

CSS

Discussions similaires

Partager

Partager