Bonjour,
J'ai réalisé un menu déroulant vetical. Il possède 3 niveaux pour le premier bloc, 2 niveaux pour le second et un seul pour le dernier.
Sous FF et IE7, le menu s'affiche parfaitement. Mais sous IE6, des petits espaces apparaissent entre les cases du second niveau uniquement. Or, quand je passe la souris dessus, pour aller d'une case à l'autre, du fait de ces espaces, on quitte le menu.
Chose plus incroyable, cela ne se produit pas lorsque la page est blanche derrière le menu mais uniquement lorsqu'il y a du contenu derrière, qui prend donc le pas sur le menu.
Je sais pas si c'est très clair, je vous indique donc un lien pour que vous testiez vous même : http://www.keria.fr/test/menu.php[/url]
Ne faites pas attention au design "condensé"... ce qui est étrange c'est que le troisième niveau du menu fonctionne bien...
Voila le code du css :
Et le menu en lui-même :
Merci d'avance pour votre aide précieuse...
J'ai réalisé un menu déroulant vetical. Il possède 3 niveaux pour le premier bloc, 2 niveaux pour le second et un seul pour le dernier.
Sous FF et IE7, le menu s'affiche parfaitement. Mais sous IE6, des petits espaces apparaissent entre les cases du second niveau uniquement. Or, quand je passe la souris dessus, pour aller d'une case à l'autre, du fait de ces espaces, on quitte le menu.
Chose plus incroyable, cela ne se produit pas lorsque la page est blanche derrière le menu mais uniquement lorsqu'il y a du contenu derrière, qui prend donc le pas sur le menu.
Je sais pas si c'est très clair, je vous indique donc un lien pour que vous testiez vous même : http://www.keria.fr/test/menu.php[/url]
Ne faites pas attention au design "condensé"... ce qui est étrange c'est que le troisième niveau du menu fonctionne bien...
Voila le code du css :
.menu {
z-index:10000;
font-size:90%;
height:300px;
margin:25px 0 50px 15px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:200px;
height:300px;
position:relative;
border:1px solid #fff;
}
.menu li {
height:100px;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:100px;
line-height:100px;
width:200px;
color:#fff;
text-indent:5px;
border-bottom:1px solid #fff;
}
.menu a.prune {
background:#9c0055;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:24px;
}
.menu a.vert {
background:#9cd219;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:24px;
}
.menu a.orange {
background:#f79f12;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:24px;
}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#cccccc;}
.menu :hover > a {
color:#fff;
background:#cccccc;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:200px;
width:200px;
padding:0;
margin:0;
}
.menu ul ul.v {
visibility:hidden;
position:absolute;
left:200px;
top:100px;
width:200px;
padding:0;
margin:0;
}
.menu ul ul ul{
visibility:hidden;
position:absolute;
top:-1px;
left:200px;
width:200px;
}
.menu ul ul ul.salon {
left:200px;
top:-1px;
width:200px;
}
.menu ul ul ul.cuisine {
left:200px;
top:30px;
width:200px;
}
.menu ul ul ul.chambre {
left:200px;
top:60px;
width:200px;
}
.menu ul ul ul.sdb {
left:200px;
top:90px;
width:200px;
}
.menu ul ul ul.jardin {
left:200px;
top:120px;
width:200px;
}
.menu ul ul li.pli {
height:30px;
width:200px;
}
.menu ul ul ul li.ppli {
height:30px;
width:200px;
}
.menu ul ul li a, .menu ul ul li a:visited {
display:block;
text-decoration:none;
height:29px;
line-height:29px;
width:200px;
color:#fff;
text-indent:5px;
border-bottom:1px solid #fff;
}
.menu ul ul ul li a, .menu ul ul ul li a:visited {
display:block;
text-decoration:none;
height:29px;
line-height:29px;
width:200px;
color:#fff;
text-indent:5px;
border-bottom:1px solid #fff;
}
.menu ul ul li a.prune {
background:#9c0055;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:16px;
font-style:italic;
font-weight:bold;
width:200px;
}
.menu ul ul li a.vert {
background:#9cd219;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:16px;
font-style:italic;
font-weight:bold;
width:200px;
}
.menu ul ul ul li a.prune {
background:#9c0055;
text-align:center;
font-family:'Avant Garde Book BT',Verdana,Arial;
font-size:16px;
font-style:italic;
font-weight:bold;
width:200px;
}
* html .menu a:hover {color:#fff; background:#cccccc;}
.menu :hover > a.prune {
color:#fff;
background:#cccccc;
}
.menu :hover > a.vert {
color:#fff;
background:#cccccc;
}
.menu :hover > a.orange {
color:#fff;
background:#cccccc;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
height:150px;
}
.menu ul li:hover ul.v,
.menu ul a:hover ul.v {
visibility:visible;
height:240px;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul.salon{
visibility:visible;
height:90px;
}
.menu ul :hover ul :hover ul.cuisine{
visibility:visible;
height:90px;
}
.menu ul :hover ul :hover ul.chambre{
visibility:visible;
height:90px;
}
.menu ul :hover ul :hover ul.sdb{
visibility:visible;
height:90px;
}
.menu ul :hover ul :hover ul.jardin{
visibility:visible;
height:90px;
}
Et le menu en lui-même :
<div class="menu">
<ul>
<li><a href="#nogo" class="prune">Pièces
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="p">
<li class="pli"><a href="#" class="prune">Salon
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="salon">
<li class="ppli"><a href="produit.php?prod=Appliques" class="prune">Appliques</a></li>
<li class="ppli"><a href="produit.php?prod=Halogenes" class="prune">Halogènes</a></li>
<li class="ppli"><a href="produit.php?prod=Veilleuses" class="prune">Veilleuses</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="pli"><a href="#" class="prune">Cuisine
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="cuisine">
<li class="ppli"><a href="produit.php?prod=Lampes" class="prune">Lampes à poser</a></li>
<li class="ppli"><a href="produit.php?prod=Lumieres" class="prune">Lumière intégrée</a></li>
<li class="ppli"><a href="produit.php?prod=Plafonniers" class="prune">Plafonniers</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="pli"><a href="#" class="prune">Chambre
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="chambre">
<li class="ppli"><a href="produit.php?prod=Chambre1" class="prune">Chambre 1</a></li>
<li class="ppli"><a href="produit.php?prod=Chambre2" class="prune">Chambre 2</a></li>
<li class="ppli"><a href="produit.php?prod=Chambre3" class="prune">Chambre 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="pli"><a href="#" class="prune">Salle de Bain
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sdb">
<li class="ppli"><a href="produit.php?prod=Enfants1" class="prune">Enfants 1</a></li>
<li class="ppli"><a href="produit.php?prod=Enfants2" class="prune">Enfants 2</a></li>
<li class="ppli"><a href="produit.php?prod=Enfants3" class="prune">Enfants 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="pli"><a href="#" class="prune">Jardin
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="jardin">
<li class="ppli"><a href="produit.php?prod=Meubles1" class="prune">Meubles 1</a></li>
<li class="ppli"><a href="produit.php?prod=Meubles2" class="prune">Meubles 2</a></li>
<li class="ppli"><a href="produit.php?prod=Meubles3" class="prune">Meubles 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="vert">Styles
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="v">
<li class="pli"><a href="produit.php?style=Fer" class="vert">Fer forgé</a></li>
<li class="pli"><a href="produit.php?style=Verrerie" class="vert">Verrerie</a></li>
<li class="pli"><a href="produit.php?style=Rustique" class="vert">Rustique</a></li>
<li class="pli"><a href="produit.php?style=Neutre" class="vert">Neutre</a></li>
<li class="pli"><a href="produit.php?style=Floral" class="vert">Floral</a></li>
<li class="pli"><a href="produit.php?style=Exterieur" class="vert">Extérieur</a></li>
<li class="pli"><a href="produit.php?style=Moderne" class="vert">Moderne</a></li>
<li class="pli"><a href="produit.php?style=Enfant" class="vert">Enfant</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../index.php" class="orange">L'esprit Keria</a></li>
</ul>
</div>
Merci d'avance pour votre aide précieuse...