Menu déroulant sous IE7 se décale à droite de mon onglet

Bonjour à tous!

Encore un problème sous IE pour changer... Sur tous les navigateurs je n'ai pas de problèmes, excepté IE7.

J'ai donc un menu horizontal, avec des onglets, quand je passe sur un onglet un menu déroulant apparait (en css).

Sur tous les navigateurs le sous menu apparait sous l'onglet, mais dans IE7 il apparait à sa droite et verticalement.

Voici le code:

<div id="topmenu">
<ul id="menulist_root" class="mainlevel">
<li id="menuitem_1" class="mainlevel">
<li id="menuitem_2" class="mainlevel_active">
<a id="menulink_2" class="mainlevel_active" href="page1.html">page1</a>
<ul id="menulist_2">
<li id="menuitem_2_1" class="sublevel_current">
<a id="menulink_2_1" class="sublevel_current" href="page2.html">page2</a>
</li>
<li id="menuitem_2_2" class="sublevel">
<a id="menulink_2_2" class="sublevel" href="page3.html">page3</a>
</li>
</ul>
</li>
<li id="menuitem_3" class="mainlevel">
<a id="menulink_3" class="mainlevel" href="page4">Contact</a>
</li>
</ul>
</div>

Et la css:

#topmenu li{
	float: left;
}

ul#menulist_root li:hover ul{
    display:block;
    background:none;

}

ul#menulist_root li ul li{
	background-image: url(../images/boutonh1.png);
	width: 170px;
        clear:both;
}

ul#menulist_root li ul li a{
    background:none;
    width:170px;
    color:#7a7a7a;
    text-decoration: none;
    display: block;
}

ul#menulist_root li ul li a:hover{
    color:#fff;
    background:none;
}



ul#menulist_root li ul {
        display:none;
	position: absolute;
	z-index: 1;
}

Je pense n'avoir rien oublié.

Merci pour votre aide!
Modifié par dodpeps (31 May 2011 - 11:44)

Bonjour Dodpeps,

Hmm, avant que nous puissions t'aider, je pense qu'il faudrait que tu révise un peu ta structure HTML. Il y a un sérieux problème d'imbrication, sans compter le "<li id="menuitem_3" class="mainlevel">" laissé ouvert...

Reviens nous voir dès que c'est ok !

C'est pas moi qui est conçu ce code c'est un menu sous joomla... Il est générer "seul".

J'ai mal copié le code, j'ai corrigé.
Modifié par dodpeps (31 May 2011 - 11:45)

Quand on se sert d'un élément en position:absolute, il est préférable de lui définir un conteneur référent, lui attribuer un point d'ancrage pour l'axe x, y.
Un élément positionné se réfère à son plus proche parent lui-même positionné, il faut donc ajouter ceci, par exemple.

ul#menulist_root li {
    position: relative;
}

Ensuite, pour éviter que les navigateurs laissent libre court à leur imagination, il est intéressant de spécifier où l'élément doit se placer par rapport à son parent :

ul#menulist_root li ul {
        [...]
	[b]left:0;[/b]
	[b]top:100%;[/b]
        [...]
}

Bien sur les valeurs peuvent ne pas te convenir, à toi de voir !
Modifié par Nigel (31 May 2011 - 12:14)

Merci! ça marche parfaitement en ayant ajouté ceci.