Problème de menu déroulant sous Firefox:

Salut à tous les membres d'Alsacréations! Grâce à ce site et à ce forum j'ai pu commencer la mise en page d'un nouveau site web alors que je n'y connais rien en css et autre javascript! Donc déjà merci.

Je me suis donc mis à la tâche et assez rapidement en suivant comme j'ai pu les tutoriaux j'ai réussi à obtenir plus ou moins ce que je voulais... le problème c'est bien le plus ou moins: si sous IE je ne déplore aucun problème d'affichage il en est autrement sous Firefox.

Explication: le site contient un menu déroulant horizontal inspiré de http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Je ne rencontre aucun problème sous IE puisque les sous menus s'affichent correctement au passage de la souris, tout beaux tout propres. En revanche sous Firefox tout est condensé sur la même ligne: les sous menus s'empilent, tout moches tout crades.

J'ai l'impression que le menu lu sous Firefox ne veut pas déborder sur la partie site. Pourtant il me semble que la fonction z-index est à peu près bien exploitée; cette dernière phrase laissant apparaître tout mon côté noob me direz vous. Je ne comprend pas pourquoi sur le tutorial avec Firefox les sous-menus n'hésitent pas à venir par dessus la partie site?

Bref si quelqu'un a une suggestion je suis preneur! Ca fait deux jours que je cherche la solution miracle!

Voici mon css:

<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: black;
font: 10px verdana, arial, sans-serif;
}

#global {
margin-left: auto; ;
margin-right: auto;
width:100%;
text-align: left;
position: relative;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 70;
left: 50%;
margin-left: -378px;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
font: 10px verdana, arial, sans-serif;
font-weight: bold;
background: none;
border: none;
margin: 1px;
}
html>body #menu dt {
line-height: 16px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0px none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 100px;
left : 50%;
margin-left: -350px;
color: #000;
background-color: none;
padding: 5px;
border: 1px solid gray; 
}

-->

</style>

<style type="text/css"> 
<!--
a:link, a:active, a:visited
{text-decoration:none}
//-->

</style>

Pour avoir une idée plus précise du problème:
http://jackrogers.free.fr/testmenu

J'espère avoir été assez clair, ma noobitude m'empêchant quelque peu de l'être plus! Merci par avance!
Modifié par vince (18 Dec 2005 - 01:04)