Menu déroulant CSS

[moldar]

Bonjour,

Je vais devenir dingue :mrgreen:
J'ai créé un menu déroulant en CSS, et pour une obscure raison, sous IE, j'arrive à le dérouler mais il disparait aussitôt que j'essaye de sélectionner un sous-menu. Voici la page en question :

http://www.macrophotographie.eu/gouttes.php?pagecour=1

Passer votre curseur sur "Insectes", puis essayez de sélectionner une sous-catégorie ("Coléoptères" par exemple).
Par contre sous Firefox, aucun problème, le menu ne disparait pas ! (J'ai l'impression que c'est la présence d'une IMG qui perturbe IE : quand on appelle la page sans paramètre http://www.macrophotographie.eu/gouttes.php le problème n'apparait plus ...)

Voici le CSS du menu déroulant :

<style type="text/CSS">
#menu {
font-family: Myriad pro, Arial, Verdana, sans serif !important;
font-variant: small-caps;
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:left;
}
#menu li {
float:right;
margin:auto;
padding:0;
background-color:#FFFFFF;
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
background-color:#000000;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
position:absolute;
top:498px;
display:block;
}
#menu li:hover ul li {
float:none;
}

</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
#menu ul li:hover ul {
poisition:absolute;
top:485px;
display:block;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->

Et celui du menu HTML :

<div id="menu">

<ul>
<li>
<a style="padding: 5px 10px 5px 10px;" href="http://www.macrophotographie.eu/index.html" >Accueil</a>
</li>
<li>
<a style="padding: 5px 10px 5px 10px;" href="http://www.macrophotographie.eu/macrophotographie-fleurs.php">Flore</a>
</li>
<li>
<a style="padding: 5px 10px 5px 10px;" href="http://www.macrophotographie.eu/macrophotographie-araignees.php">Arachnides</a>

</li>
<li>
<a style="padding: 5px 10px 5px 6px;" href="#">Insectes</a>
<ul>
<li><a href="#">Coléoptères (Coccinelles...)</a></li>
<li><a href="#">Diptères (Mouches...)</a></li>
<li><a href="#">Hémiptères (Punaises ...)</a></li>
<li><a href="#">Hyménoptères (Abeilles ...)</a></li>

<li><a href="#">Lépidoptères (Papillons ...)</a></li>
<li><a href="#">Odonates (Libellules ...)</a></li>
<li><a href="#">Orthoptères (Sauterelles ...)</a></li>
</ul>
</li>
</ul>
</div>

Merci pour votre aide !

 

[Leonick]

as-tu essayé sans l'ascenseur horizontal ?

 

[kevicar]

Hello !

Je vois déjà une petite erreur ici ... :wink:

#menu ul li:hover ul {
poisition:absolute;
top:485px;
display:block;
}

Si tu colles bien tes sous-menus cela doit fonctionner.

Magnifique photos ... Félicitations !

:wink:

 

[kevicar]

Moldar ... n'oublie pas de revenir nous dire si cela fonctionne !!! :roll:

Cela m'interresse aussi ! :mrgreen:

:wink: