Bug Menu Déroulant IE7

Bonjour à vous,

J'ai fait un petit menu déroulant en suivant un tuto, j'ai remplacé les éléments par des boutons images.

Mon seul soucis, c'est que sur mes li déroulants, uniquement sous Internet Explorer 7, il apparaissent à côté du bouton principal au lieu d'en dessous

<div id="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>

Voici mon CSS:

#menu{

margin-left:49px;

}

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
 
#menu li {
 float:left;
 margin:auto;
 padding:0;
 }
 
#menu ul li ul {
 display:none;
 }

#menu ul li:hover ul {
 display:block;
 
 }
#menu li:hover ul li {
 float:none;
 }

#menu li ul {
 position:absolute;
 }

Modifié par TRUNCKS (31 Aug 2011 - 14:19)

Ça ne parle à personne ?

bonjour,

#menu li ul {

 position:absolute;

 }

pour IE7 , le retour a la ligne n'est pas effectué comme c'est le cas dans les autres navigateur.

IE7 met en application le positionnement en absolue(l'extrait du flux de la page) sans se soucier du positionnement qu'aurait l’élément dans le flux .
Pour régler ça , il faut se servir des coordonnées de positionnement (left, top, ...) et éventuellement mettre le conteneur parent principal ou direct en positionnement relatif.

cordialement

Merci pour ta réponse.

Je suis un peu débutant et je ne sais pas trop comment m'y prendre

okay

#menu li {
position:relative; /* devient la position de référence pour ses élément enfants */
}
#menu li ul {
position:absolute;
/* coordonnées de position depuis la zone couverte a l’écran par l’élément parent li 
par exemple: */
top:100%;
left:0;
}

il me semble qu'il y ait un tuto sur le positionnement relatif sur ce site.

cordialement