Bug IE6 : afficher un menu déroulant au dessus d'un div

Bonjour,

Je suis entrain de réaliser un menu déroulant horizontal, sans javascript ni htc. Tout fonctionne bien, sauf sous IE6, où le menu une fois déroulé passe ne passe pas au dessus des div positionnés en "relative"...

Pour ceux qui n'auraient pas IE6, voici le soucis :
http://img406.imageshack.us/img406/807/exemple.png

J'ai isolé au maximum le problème, et voici le code :

<a href="" class="checkbox_deroulants">
	<table>
		<tr><td>1</td></tr>
		<tr><td>2</td></tr>
		<tr><td>3</td></tr>
		<tr><td>4</td></tr>
	</table>
</a>
<div style="position: relative;">toto</div>

a.checkbox_deroulants
{
	display: block;
	position: relative;
	height: 30px;
	overflow: hidden;
	border: solid 1px;
}

a.checkbox_deroulants:hover
{
	overflow: visible;
}

.checkbox_deroulants table
{
	position: absolute;
	display: block;
	width: 100%;
	background-color: #00ff00;
}

Il semblerait que le soucis vienne du "position: relative;" du 2nd cadre, car sans cela le menu passe bien au dessus du texte. Existe-t'il une solution pour régler ce bug?

Merci d'avance!
Modifié par Helldream (07 Jul 2009 - 18:41)

Salut,

Helldream a écrit :
Existe-t'il une solution pour régler ce bug?

Ce n'est pas un bug, c'est le comportement normal, et il est respecté par tous les navigateurs, pas seulement IE6.

Rappel
La disposition verticale par défaut des éléments est la suivante :
- d'abord la pile du bas, avec tous les éléments statiques, dans l'ordre de leur apparition dans le code (en conditions normales ils sont plutôt les uns à côté des autres, mais il existe bien un ordre vertical, mis en évidence dans des situations d'overflow, par exemple)
- puis la pile du haut, avec tous les éléments positionnés, également dans l'ordre de leur apparition dans le code

Ta div "toto" et ton lien "checkbox_deroulants" sont certes tous deux dans la pile du haut, mais toto venant après dans le code, c'est elle qui tient le dessus. Le fait de modifier l'overflow du lien n'a aucun effet sur ça.

a écrit :
sans ["position: relative;"] le menu passe bien au dessus du texte

Bien sûr, car dans ce cas toto, devenant statique, passe dans la pile du bas.
Modifié par marcv (07 Jul 2009 - 22:34)

Merci pour ta réponse, elle m'a non seulement permis de mieux comprendre mon problème, mais aussi de l'éclairer sur la logique de disposition des éléments.

En fait, ce soucis ne se pose que sur IE6 parce que c'est visiblement le seul navigateur où je dois obligatoirement mettre un "position: relative;" si je veux qu'il prenne en compte mon "overflow: hidden;". Ainsi, si j'ai 2 menus déroulants sur 2 lignes, le menu déroulé de la 1e ligne passe derrière le menu de la 2nde.

Finalement, j'ai trouvé une solution en n'utilisant plus d'"overflow: hidden;" (et donc plus de "position: relative;" non plus). Par contre, IE6 n'a pas l'air non plus de prendre correctement en compte les "z-index", lorsqu'on les mets dans un "a:hover"....

Merci encore
Modifié par Helldream (08 Jul 2009 - 09:50)