Menu vertical (variante) du tutoriel

bonjour,
j'ai utiliser le tutoriel du site pour creer un menu vertical. (la variante)
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

j'ai 2 rendus differents 1 sous IE et 1 sous FF.
http://fcssr.free.fr/ie.jpg mouseover sur le club sous IE
http://fcssr.free.fr/ff.jpg mouseover sur le club sous FF

j'aimerais que le rendu soit celui de FF sur tout les navigateurs.

voici mes ligne de codes.
CSS
ul {
margin: 0;
margin-bottom: 10px;
padding: 0;
list-style-image: url("../images/foot.gif");
}

li {
margin: 0;
margin-left: 20px;
margin-top: 4px;
padding: 0;
}

#menu {
width:168px;
float:left;
height:602px;
}

#menu dt {
cursor: pointer;
background: #fff;
height: 20px;
line-height: 20px;
margin: 2px;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
left: 120px;
margin-top: -14px;
width: 140px;
background: #fff;
border: 1px dashed gray;
}

#menu ul {
padding: 2px;
background:0;
list-style-image: url("../images/foot.gif");
}

#menu li {
font-size: 10px;
height: 18px;
line-height: 18px;
background:0;
}

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
background-color:#fff;
background:0;
}

#menu li a:hover {
color:#fce017;
background-color:#000;
text-decoration: underline;
}


PAGE HTML
<?php
include 'includes/menu.js';
?>
<dl>
<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
</dl>

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

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="club.php">Le Club</a></li>
<li><a href="ecoledefoot.php">L'école de foot</a></li>
<li><a href="debutants.php">Les Débutants</a></li>
<li><a href="poussins.php">Les poussins</a></li>
<li><a href="benjamins.php">Les Benjamins</a></li>
<li><a href="13ans.ph">Les Moins de 13 ans</a></li>
<li><a href="15ans.php">Les Moins de 15 ans</a></li>
<li><a href="18ans.php">Les Moins de 18 ans</a></li>
<li><a href="seniors.php">Les Séniors</a></li>
<li><a href="feminines.php">Les Féminines</a></li>
<li><a href="veterans.php">Les Vétérans</a></li>
<li><a href="futsal.php">Le Futsal</a></li>
</ul>
</dd>
</dl>

le JAVASCRIPT
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

d'ou viens mon erreur ?

Salut elti,
deja, il aurai eté préférable que tu inseres ton code à l'aide de la balise prevu à cet effet (code), ça aide a la lisibilité.
Ensuite, pour ton probleme, je pense qu'il faudrait que tu es

#menu li {
font-size: 10px;
height: 18px;
line-height: 18px;
background:0;
list-style-image: url("../images/foot.gif");
}

VOilà, dis nous ce que ça donne, A+


: dsl pr le flood Modifié par broadcastor (08 Jun 2006 - 18:18)

tout d'abord excusez moi pour mauvaise mise en forme de mon message...
sinon j'ai essayer votre astuce et ca ne marchait pas MAIS vous m'avez mis sur la bonne route.... il ne fallait pas toucher a la margin-left de mon <li> mais a mon padding=2 de mon <ul>

merci beaucoup.
Modifié par elti69 (09 Jun 2006 - 13:31)