[Résolu] Problème d'effet "overflow:visible" sur menu horiz

Salut à tous,

J'ai utilisé ce tuto pour créer mon menu horizontal mais depuis le départ j'ai un gros soucis avec l'affichage, à savoir que lorsque les sous-menus s'affichent, tout le contenu se trouvant en dessous du menu descend afin de laisser visible les sous-menus et le contenu dit.
Ca e donne l'impression que les sous-menus (voir le menu) sont en "overflow: visible", ce qui n'est pas le cas.
J'ai aussi pensé avoir laissé trainer cet overflow dans le div où se trouve le menu, ce qui n'est pas non plus le cas. D'où cela peut-il venir? du javascript?
Et comment arranger ça svp?
Pour voir

Voici aussi le css de mon menu:

dl, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

dt {
margin: 0;
padding-top: 3px;
list-style-type: none;
}


#menu {
position: relative ; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
color: #FFFFFF;
}
#menu dl {
float: left;
width: 11.111%;
}

.dt1 {
float: left;
width: 100%;
}



#menu dt {
height: 17px;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #0CF;
background-image: url(menu_hautdepage/bouton.gif);
border-color: #000000;
border-style: solid none;
border-width: 1px;
}
#menu dd {
width: 139px;
display: none;
border: 1px solid gray;
background-color: #0CF;
}
#menu li {
text-align: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: #fff;
margin-left: 5px;

}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
background-image: url(menu_hautdepage/boutonOver.gif);
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #0CF;
padding: 5px;
border: 1px solid gray; 
}

Et au cas où on me le demande, le css du div dans lequel se trouve le menu:

#menu_haut{
   width:  995px;
   height: 22px;
   background-image: url(menu_hautdepage/bouton.gif);
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto; }

En ce qui concerne le script du contenu du menu c'est le même que sur le tuto, excepté un class="dt1" ajouté afin de régler la largeur du menu sous ff, ie6 et ie7:

<div id="menu">
	<dl>
		<dt [#darkblue]class="dt1"[/#] onmouseover="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
	</dl>	
        
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Club 2007-08</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Club</a></li>
				<li><a href="#">Effectif</a></li>
				<li><a href="#">Calendrier OM</a></li>
				<li><a href="#">Supporters</a></li>
				<li><a href="#">V&eacute;lodrome</a></li>
				</ul>
		</dd>
	</dl>

[...]

</div>

Sinon au passage, merci pour ce menu: depuis le temps que j'en cherchais un configurable à ce que je voulais, passant d'abord par des menus tout fait comme "all web menu" ou "1 cool menu" qui ne sont en vrai guère pratiques, les connaissances acquises au fil du temps m'ont permis de découvrir qu'en réalité, celui-ci est certainement l'un des meilleurs puisque finalement configurable à sa guise...
Bref, ça résoud pas mon problème ça!
Modifié par steve2206 (22 Jun 2007 - 19:04)

j'ai oublié de précisé que ça fait ça avec ie6 et ff; avec ie7 ça marche comme il faut.

Après quelques recherches plus poussés que précédement, je pense que le soucis pourrait se régler avec z-index: j'ai un peu testé mais je ne trouve pas la bonne solution.

Bon le problème ne venait absoluemant pas du z-index et pour cause: cette fonction permet de faire passer dessus ou dessous certaines éléments et dans mon cas le menu ne supprposait rien du tout puisqu'il décalait ma page.

Je ne sais pas pourquoi j'ai eu un flash et j'ai trouvé tout seul, en testant au hasard complet, vous savez, le fameux "on ne sait jamais, ça pourrait être ça malgrè un gros doute...".
Bref, il me suffisait simplement d'ajouté un petit position: absolute; au "menu dd", vu que j'avais modifier la position absolue de "menu" en relative un peu plus haut.
Donc dans mon cas j'ai fait comme ceci:

a écrit :
#menu dd {
position: absolute;
width: 139px;
display: none;
border: 1px solid gray;
background-color: #0CF;
}

En réalité c'est tout bête... comme d'habitude de toute façon!
En tout cas merci même si je n'ai pas eu de réponse: mes reflexions à ce sujet n'aurait peut-être pas été les même.