Menu horizontal en CSS sans Javascript...

Version imprimable

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:

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:

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

17/11/2008, 10h27
devyan

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)

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:

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

17/11/2008, 11h10
devyan

La syntaxe "li > .sousMenu2" n'est pas non plus reconnue avec IE6 il me semble...
17/11/2008, 11h45
c_s_s

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.
17/11/2008, 22h47
Décibel

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... ;)
17/11/2008, 22h50
Bovino

Citation:

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 !!!
17/11/2008, 23h14
Décibel

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