28172 sujets

CSS et mise en forme, CSS3

Menu deroulant css horizontal - pb ie7 et ie6

Bonjour,

Je suis en train de réaliser un menu deroulant horizontal en css. Tout va bien sur ie 8 et firefox lorsque je passe la souris sur le menu solution, les activités apparaissent correctement en dessous

upload/26502-Sans-titre.jpg

Par contre , sur ie 7 et ie 6, ça décale sur la droite tout le menu...
upload/26502-ie7.jpg

Voici mon code html pour le menu :
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A propos de moi</a></li>
<li><a href="#">Bien choisir</a></li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a></li>
<li><a href="#">Activities 4</a></li>
</ul>
</li>
<li><a href="#">Produits</a>
<ul>
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Protéger</a></li>
<li><a href="#">Adoucir</a></li>
<li><a href="#">Purifier</a></li>
<li><a href="#">Récupérer</a></li>
</ul>
</li>

<li><a href="#">Promotion</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Téléchargement</a></li>
</ul>
</div>


//---------------------------------------
et une partie de mon code css pour le menu :

body {
behavior: url("csshover3.htc");
background-color: #FFFFFF;
width: 1002px;
background-position:top;
margin:auto;
padding:0;
height:100%;

}

#menu {
width:1002px;
position:absolute;
top:84px;
background-image: url(../img/head2.gif);
/*background-color: #339AD3;*/
background-repeat: repeat-y;
height:56px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
/*background-color:black;*/
}
#menu li a {
display:block;
font: normal 10px Verdana;
width:110px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
/*color:#FFD700;*/
}
#menu ul li ul {
display:none;
left:0;

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

//----------------------------

Il n'y pourtant aucun piège dans mon menu.

Merci d'avance pour votre aide

Cordialement

Melancomique
Bonjour,

Je crois qu'il y a un soucis au niveau de tes balises.

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A propos de moi</a></li>
<li><a href="#">Bien choisir</a></li>
<li><a href="#">Solutions</a>[#red]</li> (li à rajouter)
</ul>[/#] (ul à rajouter)
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a></li>
<li><a href="#">Activities 4</a></li>
</ul>
[b]</li> (à supprimer)[/b]
[#red]<ul>[/#] (ul à rajouter)
<li><a href="#">Produits</a>
[b]<ul> (à supprimer)[/b]
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Protéger</a></li>
<li><a href="#">Adoucir</a></li>
<li><a href="#">Purifier</a></li>
<li><a href="#">Récupérer</a></li>
</ul>
[b]</li> (à supprimer)[/b]
[#red]<ul>[/#] (ul à rajouter)
<li><a href="#">Promotion</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Téléchargement</a></li>
</ul>
</div>
Hello melancomique et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Merci pour vos réponses.

Je pense aussi que mon menu est bien écrit comme le lien que m'a envoyé Heyoan.

Où est donc le pb alors ?

Merci d'avance

Melancomique
Bonjour,

Merci de bien vouloir prendre en considération la remarque d'Heyoan concernant le formatage de ton code.
Modifié par Laurie-Anne (26 Jan 2010 - 14:53)
Luleen a écrit :
Bonjour,
Je crois qu'il y a un soucis au niveau de tes balises.
...
Réponse : Non Smiley smile

Humm...C'est la deuxième fois aujourd'hui, non ? Smiley lol
Smiley pelle Smiley sm
Ca y est, je suis perdu avec vos commentaires lol !. J'ai regardé la proposition de mlbcreation mais en vain. Mon code du menu est bon ?. Il y a un sous menu en dessous de Solutions et de Produits :

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A propos de moi</a></li>
<li><a href="#">Bien choisir</a></li>
<li><a href="#">Solutions</a>
<ul>
<li><a href="#">Activities 1</a></li>
<li><a href="#">Activities 2</a></li>
<li><a href="#">Activities 3</a></li>
<li><a href="#">Activities 4</a></li>
</ul>
</li>
<li><a href="#">Produits</a>
<ul>
<li><a href="#">Nouveauté</a></li>
<li><a href="#">Protéger</a></li>
<li><a href="#">Adoucir</a></li>
<li><a href="#">Purifier</a></li>
<li><a href="#">Récupérer</a></li>
</ul>
</li>

<li><a href="#">Promotion</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Téléchargement</a></li>
</ul>
</div>

Merci de m'éclaircir. Désolé , je n'ai pas l'habitude de ce forum Smiley confus
Sujet clos
Aller à