Probleme de menu deroulant Sous IE6

**Althor** · 17/03/2006, 11h14

Euh je pense que je dois poster ca ici mais je suis pas sur.
Si je me suis tromper je m'excuse d'avance

Voila je devellope un site internet en php pour un stage et j ai un probleme avec le menu deroulant

En effet tous marche bien sauf dans le cas ou il y a une liste deroulante car a ce moment la celle ci passe sur le menu et le cache Screen ici

Pour creer ce menu sous IE j'utilise une pseudo classe en java script dont le code est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

ensuite j'appelle cette pseudo classe avec les propriete CSS. (j'avoue le code n'est pas de moi et je ne sais plus ou j'ai trouver cette idee

)

le code (XHTML normalement) ressemble a

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p><li><a href="./?page=admin.php">Admin</a>
		<ul>
			<li><a href="./?page=NewsLetter.php&creer=1">Nouvelle NewsLetter</a></li>
			<li><a href="./?page=liste-candidature.php">Liste des candidatures</a></li>
			<li><a href="./?page=liste_message.php">Liste des messages</a></li>
			<li><a href="./?page=liste_doc.php">Liste des doc.</a></li>
			<li><a href="./?page=admin.php&memo=1">M&eacute;mo</a></li>
			<li><a href="./?page=liste_eleves.php&memo=1">Liste des &eacute;l&egrave;ves</a></li>
			<li><a href="./?page=liste_anciens_eleves.php&memo=1">Liste anciens &eacute;l&egrave;ves</a></li>
			<li><a href="./?page=admin.php&ajou=1">Ajout d'&eacute;l&egrave;ve(s)</a></li>
			<li><a href="./?page=Liste-Formateurs.php">Liste des formateurs</a></li>
		</ul>
	</li>
	</p>

je rappelle ce code autant de fois qu'il y a de menu

et pour finir les CSS sont :

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
 
#nav, #nav ul { /* toutes les listes */
	padding: 0px; /* définit la marge intérieure de la liste */
	margin: 0px; /* définit la marge de la liste */
	list-style: none; /* définit le style de la liste */
	float : left; /* définit la position de la liste */
	width : 95%; /* définit la largeur de la liste */
}
 
#nav li { /* tous les items de liste */
	position : relative; /* défini le type de positionement des listes */
	float : left; /* defini ou se place la liste */
	margin-bottom : 2%; /* espacement entre les bouton */
	width: 100%; /* largeur des boutons (100% = largeur du menu - les marges) */
}
 
#nav li ul { /* listes de deuxième niveau */
	position : absolute; /* défini le type de positionement des sous menus */
	left: -999em; /* cache les sous menus */
	margin-left : 100%; /* définit la position du sous menu par rapport a la gauche de l'écran */
	margin-top : -22.5%; /* recentre le sous menu par rapport a son menu */
	width:150px; /* définit la largeur du sous menu */
}
 
#nav li a {
	text-decoration:none ; /* supprime le soulignement des liens */
	display:block ; /* Crée un retour à la ligne à la fin de chaque bouton */
	text-align:center; /* centre le texte de chaque bouton */
	width:100px ; /* fixe la largeur de chaque bouton */
	padding: 0%; /* défini la marge intérieur des boutons */
	color:#660000; /* défini la couleur des boutons */ 
	/*border-bottom:solid 1px;
	border-top:solid 1px;
	border-right:solid 1px;
	border-left:solid 1px;*/
	/*background-image:url(../../Images/btn.bmp); /* définit l'image de fond des boutons*/
}
 
#nav li ul li{ /* listes de deuxième niveau */
	margin-bottom : 0%; /* recolle les sous menus */
	margin-top:0%; /* recolle les sous menus */
	/*background-image:url(../Images/Menuopak.png);*/
	background-color:transparent;
 
}
 
#nav li ul li a{
	width:150px;
	height:20px;
	border-top:none;
	background-image:url(../../Images/btn2hover.png); /* définit l'image de fond des boutons */
	background-color:#D86DA5;
}
 
#nav li a:hover {
	color:#660000 ; /* change la couleur de la police lors du survol par la souris */
	background-image:url(../../Images/btnhover.gif);
}
 
#nav li ul li a:hover {
	background-image:url(../../Images/btn2hover2.png); /* change l'image du fonds lors du survol par la souris*/
}
 
#nav li.sfhover ul ul {
	left: 220%; /* fait apparaître le sous menu */
}
 
#nav li.sfhover ul, #nav li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
	left: auto;
}

Si vous voulez tester le site en situation reel il ce trouve ici

**efficks** · 17/03/2006, 14h31

C'est un problème connu d'internet explorer. Internet Explorer utilise un composant du OS pour les listes déroulantes et ce composant est afficher par dessus tous les autres composantes de la page.
Ce problème n'est pas contournable!!!

Il existe néamoins un truc plus ou moins catholique qui consiste à cacher les listes déroulante quand le menu s'affiche et à les montrer quand l'on quitte le menu déroulant.