Problème de menu sous Mozilla Firefox

Bonjour,
Débutant dans la conception de site je voudrais réaliser un menu.
Donc j'ai trouvé mon bonheur sur votre site!!
"Menu horizontal déroulant en CSS"

J'ai réussis a le faire fonctionner sour Internet explorer mais sous Mozilla Firefox impossible tout est décalé et les sous menu ne fonctionnent pas!!!

Voici mon code:


<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12px;
color: #003366;
}
#menu {
position: absolute;
width: 770px;
display: Aucune;
float: right;
font-size: 12px;
color: #003366;
}
#menu dl {
float: left;
width: 9em;
font-size: 12px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
margin: 1px;
}
#menu dd {
display: none;
border: 0px solid #FFFFFF;
font-size: 12px;
}
#menu li {
text-align: center;
background: url(IMAGES/Menu/Fond.jpg);
height: 100%;
width: 100%;
overflow: auto;
visibility: visible;
z-index: auto;
font-size: 18px;
color: #003366;
}
#menu li , #menu dt a:focus {
display: block;
height: 100%;
border: 0 none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-image: url(IMAGES/Menu/Fond.jpg);
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
font-size: 12px;
color: #FFCC00;
text-decoration: none;
background-image: url(IMAGES/Menu/Fond.jpg);
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #003366;
padding: 5px;
border: 1px solid gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFCC33;
}
a:active {
text-decoration: none;
color: #FFCC33;
}
.Style1 {
color: #FF9900;
font-size: 10px;
}
-->
</style>




<td id="menu">
<dl>

<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">ACCUEIL</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">EQUIPES</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Première</a></li>
<li><a href="#">Réserve</a></li>
<li><a href="#">Juniors</a></li>
<li><a href="#">Cadets</a></li>
<li><a href="#">Binjamins</a></li>
</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">LE CLUB</dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">L'historique</a></li>
<li><a href="#">Les dirigeants</a></li>
<li><a href="#">...</a></li>
</ul>


</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">PARTENAIRES</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Pub1</a></li>
<li><a href="#">Pub2</a></li>
<li><a href="#">Pub3</a></li>
<li><a href="#">Pub4</a></li>
</ul>


</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">INFOS </dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>

<li><a href="#">Liens divers</a></li>
<li><a href="#">Autre...</a></li>
<li><a href="#">Autre...</a></li>

</ul>
</dd>
</dl>


<dl>

<dt onmouseover="javascript:montre();"><a href="#" title="Entrée du Forum...">FORUM</a></dt>
</dl>


<dl>

<dt onmouseover="javascript:montre();"><a href="#" title="Pour nous contacter...">CONTACT</a></dt>
</dl>
</td>
</td>
</tr>
</table>
[/code]

C'est un fouillit tout ça!! désolé

Si quelqu'un peu m'aider! Merci d'avance
Modifié par ced007 (23 Sep 2005 - 22:16)

Salut ced007 et bienvenue à toi,

Je vais devoir jouer mon rôle de modérateur car il semblerait que tu n'aies pas pris le temps de lire le message d'annonce en haut du forum ("nouveau sur le forum").

Celui-ci indique clairement où se trouvent les Règles du forum (celles que tu as confirmé avoir lues et approuvé en cliquant sur le bouton d'inscription).

Ces règles expliquent notammment comment afficher un code correctement sur le forum. Merci de les appliquer pour le bien de la communauté.

Désolé c'est vrai je n'ai pas fais gaffe!

Bon en fait j'ai trouvé l'erreur! mais je ne sais pas comment la corriger!

C'est ici:

#menu {
	position: absolute;
	width: 770px;
	display: Aucune;
	float: right;
	font-size: 12px;
	z-index:100;
	color: #003366;
}

Ce code fonctionne trés bien sous IE mais pas sous Mozilla Firefox!

Par contre en changeant:

position: relative;

ce qui donne:

#menu {
	position: relative;
	width: 770px;
	display: Aucune;
	float: right;
	font-size: 12px;
	z-index:100;
	color: #003366;
             top: 0;
             left: 0;
}

Cela fonctionne sous les deux... enfin presque.

Sous Firefox impecable cela fonctionne! par contre pour IE cela me décale tout vers le bas lorsque il y a un sous menu et c'est pas bon!!

Par contre avec "absolute" c'est ok sous IE mais décallé vers la droite sous Firefox.

Que dois je faire?!!!

Merci pour votre aide
Modifié par ced007 (23 Sep 2005 - 22:39)