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.
Configuration: Mac OS X
Firefox 3.0.6