Menu déroulant problème compatibilité avec IE
Résolu
tuxinet
Messages postés
82
Date d'inscription
Statut
Membre
Dernière intervention
-
math 2000 Messages postés 2605 Date d'inscription Statut Membre Dernière intervention -
math 2000 Messages postés 2605 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- Menu déroulant problème compatibilité avec IE
- Menu déroulant excel - Guide
- Compatibilite windows 11 - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
2 réponses
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/
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/
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?
D'accord... je sais donc maintenant d'où vient mon problème... Mais comment le régler?
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.
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.