Menu déroulant problème compatibilité avec IE

Résolu/Fermé
tuxinet Messages postés 82 Date d'inscription mardi 1 avril 2008 Statut Membre Dernière intervention 8 juin 2009 - 25 févr. 2009 à 16:16
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 - 14 avril 2009 à 14:28
Bonjour,

J'ai un souci avec mon menu déroulant. Devinez lequel..... Il fonctionne à merveille sur tous les browsers mais pas sous IE. Merci Bill!

En fait sous internet explorer, lors d'un hover sur une liste, aucun sous-menu ne s'affiche.

Voici le code lié à mon menu :

Le code html :
********************************
<ul>
<li class="link"><a id="home" href="index.php?page=home">Home</a></li>
<li class="link"><a id="news" href="index.php?page=news">News</a></li>
<li class="folder">Lektionen und Unterricht
<ul class="submenu">
<li class="subfolder">Kinderland Erli
<ul class="listmenu">
<li class="link"><a id="kinderland_info" href="index.php?page=kinderland_info">Informationen Kinderland Erli</a></li>
<li class="link"><a id="kinderland_time" href="index.php?page=kinderland_time">Betriebszeiten Kinderland Erli</a></li>
<li class="link"><a id="kinderland_prices" href="index.php?page=kinderland_prices">Preise Kinderland Erli</a></li>
</ul>
</li>
<li class="subfolder">Gruppenunterricht
<ul class="listmenu">
<li class="link"><a id="grouplessons_time" href="index.php?page=grouplessons_time">Betriebszeiten Gruppenunterricht</a></li>
<li class="link"><a id="grouplessons_prices" href="index.php?page=grouplessons_prices">Preise Gruppenunterricht</a></li>
</ul>
</li>
<li class="subfolder">Privatunterricht
<ul class="listmenu">
<li class="link"><a id="privatelessons_info" href="index.php?page=privatelessons_info">Informationen Privatunterricht</a></li>
<li class="link"><a id="privatelessons_prices" href="index.php?page=privatelessons_prices">Preise Privatunterricht</a></li>
</ul>
</li>
</ul>
</li>
<li class="folder">Zusätzliche Leistungen
<ul class="listmenu" style="width:160px;">
<li class="subfolder">Schneeschuhlaufen
<ul class="listmenu">
<li class="link"><a id="walking_info" href="index.php?page=walking_info">Informationen Schneeschuhlaufen</a></li>
<li class="link"><a id="walking_time" href="index.php?page=walking_prices">Preise Schneeschuhlaufen</a></li>
</ul>
</li>
<li class="subfolder">VIP Spezial
<ul class="listmenu">
<li class="link"><a id="vip_info" href="index.php?page=vip_info">Informationen VIP Spezial</a></li>
<li class="link"><a id="vip_time" href="index.php?page=vip_prices">Preise VIP Spezial</a></li>
</ul>
</li>
<li class="link"><a id="incentive" href="index.php?page=incentive">Incentive</a></li>
</ul>
</li>
<li class="folder">Nützliche Informationen
<ul class="listmenu">
<li class="link"><a id="faq" href="index.php?page=faq">F.A.Q</a></li>
<li class="link"><a id="slopemaps" href="index.php?page=slopemaps">Pistenpläne</a></li>
<li class="link"><a id="map" href="index.php?page=map">Anreise</a></li>
<li class="link"><a id="terms_and_conditions" href="index.php?page=terms_and_conditions">Allgemeine Bedingungen</a></li>
</ul>
</li>
<li class="link"><a id="team" href="index.php?page=team">Unser Team</a></li>
<li class="link"><a id="links" href="index.php?page=links">Links</a></li>
<li class="link"><a id="contact" href="index.php?page=contact">Kontakt</a></li>
<li class="link"><a id="booking" href="index.php?page=booking">Buchen</a></li>
</ul>
**********************************

Le css :
**********************************
ul,li {
display:block;
margin:0;
padding:0;
border:0;
font-family:Arial,Verdana,sans-serif;
font-style:bold;
}

ul {
width:160px;
list-style-type:none;
padding:10px 0px 0px 10px;
}

ul.submenu {
width:160px;
padding:0px 0px 0px 0px;
}

ul.listmenu {
width:200px;
padding:0px 0px 0px 0px;
}

li {
font-weight:bold;
position:relative;
color:#000000;
padding:5px 5px 5px 5px;
}

li.link {
padding:0px 0px 0px 0px;
}

li.folder ul {
background-color:#FFCCCC;
position:absolute;
left:160px; /* for Internet Explorer */
top:0px;
}

li.subfolder ul {
background-color:#FFCCCC;
position:absolute;
left:160px; /* for Internet Explorer */
top:0px;
}

li.folder>ul {
background-color:#FFCCCC;
left:160px;
}

li.subfolder>ul {
background-color:#FFCCCC;
left:160px;
}

li>a {
width:auto;
}

li:hover {
background-color:#DDDDDD;
color:#000000;
}

li a {
text-decoration:none;
color:#000000;
width:100%; /* for Internet Explorer */
padding:5px 0px 5px 5px;
display:block;
}

li a:hover {
text-decoration:none;
color:#FF4444;
width:100%; /* for Internet Explorer */
}

ul ul, li:hover ul ul {
display:none;
}

li:hover ul, li:hover li:hover ul {
display:block;
}
****************************************

Merci de votre aide.
A voir également:

2 réponses

math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
14 avril 2009 à 14:28
il y a pas besoins d'utliser le hack css
voir ce site un menu css sans js compatible ie
et même ie6 http://bormat2.free.fr/sss.html
http://bormat2.free.fr/wordpress4/
1
tuxinet Messages postés 82 Date d'inscription mardi 1 avril 2008 Statut Membre Dernière intervention 8 juin 2009
25 févr. 2009 à 16:33
Je viens de voir dans un autre post sur ce forum que hover des balises autres que <a> n'étaient pas géré par IE.

D'accord... je sais donc maintenant d'où vient mon problème... Mais comment le régler?
0
tuxinet Messages postés 82 Date d'inscription mardi 1 avril 2008 Statut Membre Dernière intervention 8 juin 2009
25 févr. 2009 à 19:51
Y'a-t-il qqn qui peut m'aider?
0
tuxinet Messages postés 82 Date d'inscription mardi 1 avril 2008 Statut Membre Dernière intervention 8 juin 2009 > tuxinet Messages postés 82 Date d'inscription mardi 1 avril 2008 Statut Membre Dernière intervention 8 juin 2009
25 févr. 2009 à 20:27
Bon ben vu que personne ne m'aide j'ai trouvé la solution tout seul. Il y a là un script qui résoud ce problème :

Les liens de téléchargement du script ainsi que les instructions pour faire tourner ce script sur votre page web comme il faut se trouvent ici :

https://peterned.home.xs4all.nl/csshover.html

j'éspère que cela aidera quelques uns d'entre vous.
0