Simuler le :hover pour IE6
Bonjour, à tous,
Comme beaucoup de monde, j'ai un problème avec ce satané IE 6 et la pseudo classe survol. J'aimerais faire un menu qui affiche un sous-menu sur survol.
En CSS, ca donne ca :
Code:
1
2
3
4
5
6
| /*affiche le sous-menu lors du survol*/
#menu li:hover > .sousMenu
{
display: block;
float:left;
} |
Mais ca ne marche pas sur IE6. Je me suis renseigné, et après avoir entendu parler de csshover.htc et compagnie, je suis perdu. J'ai cru comprendre que le meilleur était le javascript, mais je n'y connais rien...
J'ai repéré 2 solutions sympathiques (du moins, c'est mon impression)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script type="text/javascript"><!--//--><![CDATA[//><!--
sfhover = function() {
var sfEls = document.getElementById("mainmenu").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);
//--><!]]></script> |
Mais que je n'arrive pas à adapter à mon code.
J'ai essayé, pour al 2ème de remplacer mainmenu par menu mais ca ne change rien.
VOici le code HTML qui intègre tout ca
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <ul id="menu">
<li>
<a>un lien</a>
</li>
<li >
<a>un lien</a>
<ul class="sousMenu">
<li>
<a>un lien</a>
</li>
<li>
<a>un autre</a>
</li>
<li>
<a>encore un</a>
</li>
</ul>
</li>
</ul> |
Merci d'avance.
