Probleme de menu deroulant Sous IE6
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:
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:
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émo</a></li>
<li><a href="./?page=liste_eleves.php&memo=1">Liste des élèves</a></li>
<li><a href="./?page=liste_anciens_eleves.php&memo=1">Liste anciens élèves</a></li>
<li><a href="./?page=admin.php&ajou=1">Ajout d'élè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:
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
