Probleme menu sous ie :(

Salut a tous,

j'ai cherché sur le forum et sur le site mais j'ai pas trouvé de reponse a ma question (sauf erreur de ma part)

Le menu se trouve ici

Le probleme :
sous firefox .... nikel
sous IE, mes sous-menus passe derriere le contenu de la page

Ma css :

#ULmenuDeroulant
{
	height: 30px;
	line-height: 30px;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	font: 14px Arial Black;
	border-bottom: 1px solid #e97a04;
	background: #fff;
}

#ULmenuDeroulant li
{
	height: 30px;
	line-height: 30px;
	float: left;
	width: 195px;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	text-align: center;
}

#ULmenuDeroulant li.bordered
{
	border-right: 1px solid #e97a04;
	background: #33FF00;
}
#ULmenuDeroulant .ULsousmenuDeroulant
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 30px;
	left: -1px;
	width: 100%;
	height: auto;
	border-right: 1px solid #e97a04;
	border-left: 1px solid #e97a04;
	border-bottom: 1px solid #e97a04;
	z-index: 5000;
}
#ULmenuDeroulant .ULsousmenuDeroulant li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	text-align: left;
	text-indent: 10px;
	
}

#ULmenuDeroulant li a
{
	display: block;
	background: #FFFFFF;
	color: #e89842;
	text-decoration: none;
	height: 100%;
}

#ULmenuDeroulant li a:hover
{
	color: #e97a04;
}

mon code DHTML (generé par du PHP avec MySQL)

<ul id="ULmenuDeroulant">
    <li class="bordered"  onmouseover="javascript:montre('part1');" onmouseout="javascript:cache('part1');">
        <a href="#">Agde</a>
        <ul id="part1" class="ULsousmenuDeroulant">
        </ul>
    </li>
    <li class="bordered"  onmouseover="javascript:montre('part2');" onmouseout="javascript:cache('part2');">
        <a href="#">Béziers</a>
        <ul id="part2" class="ULsousmenuDeroulant">
            <li><a href="#">Bars, Lounge</a></li>
            <li><a href="#">Restaurants</a></li>
        </ul>
    </li>
    <li class="bordered"  onmouseover="javascript:montre('part3');" onmouseout="javascript:cache('part3');">
        <a href="#">Cap d'agde</a>
        <ul id="part3" class="ULsousmenuDeroulant">
        </ul>
    </li>
    <li class="bordered"  onmouseover="javascript:montre('part4');" onmouseout="javascript:cache('part4');">
        <a href="#">Grau d'agde</a>
        <ul id="part4" class="ULsousmenuDeroulant">
        </ul>
    </li>
    <li  onmouseover="javascript:montre('part5');" onmouseout="javascript:cache('part5');">
        <a href="#">Marseillan</a>
        <ul id="part5" class="ULsousmenuDeroulant">
        </ul>
    </li>
</ul>

Merci à tous
Modifié par nwkduck (24 Apr 2007 - 12:05)

À priori, il faut positionner le bloc de contenu (div#middle), pour pouvoir lui attribuer un z-index inférieur. par exemple :

div#middle {
position: relative;
z-index: 5;
}

(Sinon le z-index à 5000 c'est un poil excessif... mais bon, ça ne devrait pas poser de problème.)

Toutefois, pour finir, n'oublions pas de rappeler que les menus déroulants c'est pas terrible, en fait :
http://css.alsacreations.com/Accessibilite-du-Web/accessibilite-des-menus-de-navigation-en-cascade

vi le z-index a 5000 est un peu abusé ^^

j'avais essayé de mettre mon middle en relative avec un z-index inferieur a celui de mon menu mais le probleme ne change pas sous IE

j'ai dit a mon patron que les sous-menus c'est à éviter mais bon on connait les patrons

merci pour ta réponse
Modifié par nwkduck (24 Apr 2007 - 14:12)