Problème avec menu CSS et block

Bonjour à tous,

Alors voilà j'ai un menu CSS qui se déroule quand on survole les boutons. Il fonctionne parfaitement sur Firefox et sur Safari (je suis sur Mac) mais dès que je le teste sur Explorer ... c'est la cata ! Au lieu de se dérouler en dessous, la liste de sous-menu se déroule sur la droite du bouton survolé, et il est impossible de cliquer dessus, dès que la souris quitte le bouton survolé, le sous-menu disparait.

Voici mon menu et le CSS :

<div id="menu">
<ul>
  <li><a href="index.php">Accueil</a>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>      
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>      
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>
      <li><a href="#">sous-menu</a>      
    </ul>
  </li>
  <li><a href="#">Menu 4</a></li>  
</ul>
</div>

#menu {
z-index: 9;
width:945px;
height:13px;
margin-left: 0px;
margin-top: 0px;
position:absolute;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#2b4712;
}
#menu li a {
display:block;
width:169px;
color:white;
text-decoration:none;
padding:10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
float:none;
}
#menu li:hover ul li {
float:none;
display:block;
}
#menu li ul {
position:absolute;
}

Merci de votre aide, mais là je pète un plomb ! Même sans windaube j'arrive encore à me prendre la tête avec les produits Microzob !

Bonjour,

Quelques questions :
- pourquoi utiliser position: absolute; sur #menu, si vous ne le positionnez pas ? (top, right, bottom, left ?)
- pourquoi margin:auto; sur des LI flottant à gauche ? (pas d'impact à priori)
- un élément flottant doit posséder une largeur définie (width) (aide (en))
- annuler un flottement au hover n'est pas très conseillé (sur #menu li:hover ul li)
- pourquoi utiliser position: absolute; sur #menu li ul, si vous ne le positionnez pas ?

Logiquement en répondant à ces quelques questions par du code ça devrait aller mieux.

Bon courage

Merci pour cette réponse rapide et constructive !
J'ai effectivement avancé grâce à vos remarques, il reste encore un petit problème :

Les sous-menu apparaissent bien en dessous de la barre des menus, mais toujours en décalé, le sous-menu 2 apparaît sous le menu 3 par exemple (alors qu'on survole le menu 2). Et bien évidemment je ne peux toujours pas cliquer dessus car dès que ma souris quitte le menu 2 le déroulant disparaît ...

Voici le code à jour :

#menu {
	z-index: 9;
	width:945px;
	height:37px;
	margin-left: 0px;
	margin-top: 0px;
	top: 0px;
	left: 0px;
	position:absolute;
}
#menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
}
#menu li {
	float:left;
	width: 189px;
	padding:1;
	background-color:#2b4712;
}
#menu li a {
	display:block;
	width:169px;
	color:white;
	text-decoration:none;
	padding:10px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
}
#menu li a:hover {
	color:#FFD700;
}
#menu ul li ul {
	display:none;
}
#menu ul li:hover ul {
	display:block;
}
#menu li:hover ul li {
	float:none;
	display:block;
}
#menu li ul {
	top: 39px;
	position:absolute;
}

Arf désolé mais je n'ai pas de fonction éditer ... je créé un nouveau post donc ...

Je pense que le soucis vient du positionnement de "#menu li ul" mais je ne trouve pas comment lui dire de rester à telle ou telle distance de la gauche, car celà dépend du menu survolé ...

re-edit (désolé désolé)

C'est bon il fallait rajouter left: 0px dans "#menu li ul" !

Merci pour cette illumination ! Je reviendrais tient !
A très bientôt sûrement