Soucis d'affichage menu au passage de la souris.

Bonjour à tous.
Voilà mon premier post ici, j'espère ne pas faire trop de bourdes.

Je vous expose mon soucis ici :
http://www.ben-prod.fr/essai/

Voyez le problème quand je passe sur le menu.
Comme c'est ma première experience un peu poussée avec la mise en forme grace au css, j'avoue ne pas m'en sortir depuis hier soir.

Que dois-je rajouter/modifier à ma feuille de style pour correctement voire les boutons au passage de la souris ?

Ma feuille de style :

body { 
margin:0; 
padding:0; 
background:url(images/fond.jpg) no-repeat #1d88c5 top right; 
text-align:right; 
}

#arrondi_haut { 
width:830px; 
background:url(images/cadre/arrondi_haut.png) no-repeat; 
margin:69px 163px -9px 0;
} 

#conteneur { 
width:830px; 
height:900px; 
background:#FFF; 
margin:0 163px 0 0; 
padding:0;
}
	
#menu { 
margin:-42px 0 0 0; 
height:58px;
}
#menu ul li{ 
float:left; 
padding:0; 
list-style:none; 
}
#menu ul li a{ 
height:32px; 
width:115px; 
font-size:14px; 
line-height:35px;	
display:block; 
text-decoration:none; 
text-align:center;	
color:#FFF;	
background-repeat:no-repeat; 
background-position:top left; 
font-family:Verdana, Geneva, sans-serif;	
font-size:11px;	
font-weight:bold; 
text-transform:uppercase;
}
#menu ul li a:hover{ 
height:32px;	
width:115px; 
line-height:35px; 
text-decoration:none; 
text-align:center;	
color:#333;	
font-family:Verdana, Geneva, sans-serif; 
font-size:11px; 
ont-weight:bold; 
background-repeat:no-repeat; 
background-position:bottom left;
}
#menu ul li a.orange{ background-image:url(images/boutons/bouton_orange.png);}
#menu ul li a.bleu{ background-image:url(images/boutons/bouton_bleu.png);}
#menu ul li a.vert{ background-image:url(images/boutons/bouton_vert.png);}
#menu ul li a.rouge{ background-image:url(images/boutons/bouton_rouge.png);}
#menu ul li a.jaune{ background-image:url(images/boutons/bouton_jaune.png);}
#menu ul li a.gris{ background-image:url(images/boutons/bouton_gris.png);}
#menu ul li a.rose{ background-image:url(images/boutons/bouton_rose.png);}

#heure { 
margin:0; 
padding:2px; 
height:18px; 
text-align:left; 
font-family:Verdana, Geneva, sans-serif; 
font-size:11px; 
font-weight:bold;	
color:#FFF;} 
#heure.rouge { background:url(images/barre/barre_rouge.png) no-repeat; }
#heure.bleu { background:url(images/barre/barre_bleu.png) no-repeat; }
#heure.vert { background:url(images/barre/barre_vert.png) no-repeat; }

#edito { 
margin:16px 2px 0 0; 
text-align:left; 
padding:5px; 
width:818px; 
font-family:Verdana, Geneva, sans-serif; 
font-size:10px; color:#000;}
#edito.bleu { border:1px solid #3399ff; background-color:#b7d3ef;  }
#edito.rouge { border:1px solid #ff3333; background-color:#efb7b7;  }
#edito.vert { border:1px solid #4bff33; background-color:#b7efbb;  }

Merci par avance de votre aide
Cdt,

P.S : Taille des boutons pour le menu :
Normal : 115x32 | :hover 115x57
Modifié par lnki (16 Sep 2008 - 09:48)

Bonjour et bienvenu sur le Forum

Après un rapide coup d'oeil à ton code, voici quelques remarques :
- D'après le résultat affiché sous FF et IE, je te soupçonne de ne te baser que sur le rendu d'IE..., ce qui n'est pas la meilleure façon de procéder.
A ce propos, je te conseille la lecture de cet article : Compatibilité navigateur et prise de tête
-Par ailleurs, ton <div> menu est inutile, place l'identifiant directement dans ta liste <ul> et adapte le CSS en conséquence.
- Quel est l'utilité des <div> arrondi_haut et edito ?

Et enfin, pour je pense que la lecture de ce tutoriel te permettra d'y voir un peu plus clair : Créer des menus simples en CSS