[XHTML 1.1] Problème affichage sous menu avec IE

Problème affichage sous menu avec IE

Bonjour à tous,

J'ai créé un petit site sans prétention et il n'est pas très compliqué mais je bloque sur la compatibilité de mon menu déroulant avec IE car sous mozilla ça fonctionne parfaitement:

Voila l'adresse de mon site:
http://forumdarts.free.fr/

Alors pour identifier le problème il suffit d'être sous IE et de passer la souris sur "FORUM" on voit le sous menu "FORUM N°1" "8 POOL" "FRANCE DARTS" apparaitre en colonne mais si on passe la souris le le sous menu "FORUM N°1" alors tout le sous menu s'affiche en ligne...

J'ai déjà effectué quelques modifications pour la compatibilité avec IE grace à la balises "IF IE" "ENDIF" et j'ai fait un second fichier .css pour IE.

Mais ce problème la je dois dire que je ne comprends pas d'ou cela vient.

Merci d'avance pour votre aide.

Bonjour,

Il faudrait aussi le CSS de ta page, car le lien sur ton site ne permet que de voir le HTML.

Pas de problème:
Le .css normal

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
body
{
	font-size: 1em;
	margin: auto; /* marges extérieurs */
	margin-top: 20px;
	background-color: black;
	font-family: Arial, "Arial Black", Verdana, "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
#menu a /* liens contenus dans les menu */
{
	color: #2D00FF;
	border: 1px solid black;
}
#menu a:hover /* liens survolés contenus dans les menu */
{
	color: #ff0000;
	border: 1px solid #0c51c1;
}
#menu ul
{
	padding: 0; /* marges intérieurs */
	text-align: center; /* centre le texte dans les cellules */
}
#menu li
{
	background-color: #000000; /* couleur de fond des cellules */
}
#menu ul li
{
	position: relative; /* positionne les sous-menus verticalement */
	list-style: none; /* pas de puce */
	float: left; /* mets le menu horizontalement de gauche à droite */
}
#menu ul ul
{
	position: absolute;
	display: none; /* n'affiche pas la cellule */
}
#menu li a
{
	padding: 4px 0 4px;
	display: block; /* la cellule devient un block */
	width: 130px;
}
#menu ul.niveau1 li.sousmenu:hover ul.niveau2, #menu ul.niveau2 li.sousmenu:hover ul.niveau3
{
	display: block; /* fait apparaitre les sous-menus */
}
#menu ul.niveau3
{
	margin-top: -30px;
	margin-left: 130px;
}
#en_tete
{
	Margin: auto;
	width: 1056px;
	height: 118px;
	background-image: url("graphique2.jpg");
	background-repeat: no-repeat;
}
#menu
{
	margin: auto;
	width: 1056px;
}
#compte
{
	margin: auto;
	width: 1056px;
	margin-top: 50px;
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
	color: #FFFFFF;
	border: 2px solid #0c51c1; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	color: #FFFFFF;
	border: 2px solid #0c51c1;
}
a
{
	text-decoration: none; /* Les liens ne seront plus soulignés */
	color: #0c51c1; /* Les liens seront en bleu */
	font-style: italic; /* Les liens seront en italique*/
}
a:hover
{
	color: red;
}
h1
{
	text-align: center;
	color: #0c51c1;
}
h2
{
	text-align: center;
	color: white;
	text-decoration: underline;
}
h4
{
	color: red;
	text-decoration: underline;
}
#corpslien
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	border: 2px solid #0c51c1;
	text-align: center;
}
#corpslien a
{
	color: white;
}
#corpslien a:hover
{
	color: red;
}
#corpsclassement
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	color: #FFFFFF;
	border: 2px solid #0c51c1;
	text-align: center;
}
#corpsclassement th
{
	background-color: blue;
	padding: 3px;
	font-size: 0.9em;
}
#corpsclassement td
{
	font-size: 0.8em;
	padding: 3px;
}
.white
{
	color: black;
	background-color: white;
}
.black
{
	color: white;
	background-color: black;
}
table
{
	margin: auto;
}

Et le .css pour IE il n'y a pas grand chose qui change ;)

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
body
{
	font-size: 1em;
	margin: auto; /* marges extérieurs */
	margin-top: 20px;
	background-color: black;
	font-family: Arial, "Arial Black", Verdana, "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
#menu a /* liens contenus dans les menu */
{
	color: #2D00FF;
	border: 1px solid black;
}
#menu a:hover /* liens survolés contenus dans les menu */
{
	color: #ff0000;
	border: 1px solid #0c51c1;
}
#menu ul
{
	padding: 0; /* marges intérieurs */
	text-align: center; /* centre le texte dans les cellules */
}
#menu li
{
	background-color: #000000; /* couleur de fond des cellules */
}
#menu ul li
{
	position: relative; /* positionne les sous-menus verticalement */
	list-style: none; /* pas de puce */
	float: left; /* mets le menu horizontalement de gauche à droite */
}
#menu ul ul
{
	position: absolute;
	display: none; /* n'affiche pas la cellule */
}
#menu li a
{
	padding: 4px 0 4px;
	display: block; /* la cellule devient un block */
	width: 130px;
}
#menu ul.niveau1 li.sousmenu:hover ul.niveau2, #menu ul.niveau2 li.sousmenu:hover ul.niveau3
{
	display: block; /* fait apparaitre les sous-menus */
}
#menu ul.niveau2
{
	margin-left: 0px;
}
#menu ul.niveau3
{
	margin-top: -25px;
	margin-left: 129px;
}
#en_tete
{
	Margin: auto;
	width: 1056px;
	height: 118px;
	background-image: url("graphique2.jpg");
	background-repeat: no-repeat;
}
#menu
{
	margin: auto;
	width: 1100px;
}
#compte
{
	margin: auto;
	width: 1056px;
	margin-top: 50px;
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
	color: #FFFFFF;
	border: 2px solid #0c51c1; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	color: #FFFFFF;
	border: 2px solid #0c51c1;
}
a
{
	text-decoration: none; /* Les liens ne seront plus soulignés */
	color: #0c51c1; /* Les liens seront en bleu */
	font-style: italic; /* Les liens seront en italique*/
}
a:hover
{
	color: red;
}
h1
{
	text-align: center;
	color: #0c51c1;
}
h2
{
	text-align: center;
	color: white;
	text-decoration: underline;
}
h4
{
	color: red;
	text-decoration: underline;
}
#corpslien
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	border: 2px solid #0c51c1;
	text-align: center;
}
#corpslien a
{
	color: white;
}
#corpslien a:hover
{
	color: red;
}
#corpsclassement
{
	margin: auto;
	width: 1056px;
	margin-top: 95px;
	margin-bottom: 20px;
	padding: 5px;
	color: #FFFFFF;
	border: 2px solid #0c51c1;
	text-align: center;
}
#corpsclassement th
{
	background-color: blue;
	padding: 3px;
	font-size: 0.9em;
}
#corpsclassement td
{
	font-size: 0.8em;
	padding: 3px;
}
.white
{
	color: black;
	background-color: white;
}
.black
{
	color: white;
	background-color: black;
}
table
{
	margin: auto;
}

Voila en fait ce qui change:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#menu ul.niveau2
{
	margin-left: 0px;
}
#menu ul.niveau3
{
	margin-top: -25px;
	margin-left: 129px;
}
#menu
{
	margin: auto;
	width: 1100px;
}

Je n'ai parlé que du lien "Forum" mais le problème est sur tout les menus ayant un sous menu sauf le dernier "LIENS" celui ci s'affiche parafaitement...

Bonjour,
Tu dois passer par Javascript pour afficher tes sous-menus sous IE6 ou versions inférieurs.
Fais une recherche sur le forum, la réponse s'y trouve. ;)

D'accord pour IE 6 mais pour 7 et 8 ça ne fonctionne pas non plus!

En relisant ma réponse et la question, je viens de me rendre compte que cela n'a complètement rien à voir... :aie:
Pour me faire pardonner, je propose une solution.
Voici quelques modifications à apporter (ce qui est en vert est à ajouter, en rouge à supprimer) :

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
#menu ul {
    margin: 0; /* Pour supprimer les marges établies par défaut */
    padding: 0; /* marges intérieurs */
    text-align: center; /* centre le texte dans les cellules */
}

#menu ul ul {
    position: absolute;
    display: none; /* n'affiche pas la cellule */
    left: 0; /* Pour déplacer les sous-menus vers la gauche afin de les aligner avec les parents */
}

#menu ul li:hover ul {
    display: block; /* fait apparaitre les sous-menus */
}

#menu ul ul ul {
    left: 132px; /* Pour que les sous-sous-menus se retrouvent à droite...*/
    top: 0; /* ...et alignés par rapport aux sous-menus */ 
}

#menu ul li:hover ul ul {
    display: none; /* Afin de cacher les sous-sous-menus lorsque l'on déroule les sous-menus */
}

#menu ul ul li:hover ul {
    display: block; /* Affiche les sous-sous-menus */
}

#menu ul.niveau1 li.sousmenu:hover ul.niveau2, #menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
    ...
}

#menu ul.niveau3 {
    ...
}

Merci pour la réponse et les modifications fonctionnent parfaitement à une exception près ^^
Les sous sous menu sont inaccessible car ils apparaissent avec une décalage sur la droite de 132px par rapport aux parents.
J'ai donc rectifié avec:
Code:

1 2 3 4 5 #menu ul ul ul { left: 0px; /* Pour que les sous-sous-menus se retrouvent à droite...*/ top: 0; /* ...et alignés par rapport aux sous-menus */ }
Merci beaucoup!!!