Forum d'entraide PHPFrance

Bonjour,

Je viens d'incorporer au site sur lequel je travaille un menu CSS/JS, mais j'ai un problème.

Lorsque les rubriques ne sont pas ouvertes, tout est beau, mais lorsque je passe la souris sur l'une des rubriques, tout le contenu du site se décale vers le bas, pour faire apparaitre les sous rubriques.

Or, j'aimerais que le cadre des sous-rubriques apparaisse par dessus mon site, sans que celui-ci ne bouge. J'ai essayé d'appliquer des z-index élévé a toutes les parties de mon menu, sans résultats.

Comment régler ce problème ?

La page en question : http://www.goodgame.fr/index_test.php

et le fichier qui contient le menu :

Code : Tout sélectionner

<script type="text/javascript">
<!--
var blnOk=true;
var timeout;
var delai = 350;
var nbmenu = 10;

function montre(id) 
{
	var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) 
	{
		if (document.getElementById('smenu'+i)) 
		{
			document.getElementById('smenu'+i).style.display='none';
		}
	}
	if (d) 
	{
		d.style.display='block';
	}
}



//-->


</script>


<style type="text/css">
<!-- 
/* CSS issu des tutoriels css.alsacreations.com */

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

top: 0;
left: 0;
z-index:9;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 110px;
z-index:9;
}
#menu dt {
cursor: pointer;
text-align: center;
border: 1px solid #c65157;
margin: 1px;
color: #c65157;
z-index:9;
}
#menu dd {
display: none;
border: 1px solid #c65157;
z-index:100;
}
#menu ul {
font-size: 10px;
z-index:9;
}
#menu li {
text-align: center;
margin: 3px;
z-index:9;
}
#menu li a, #menu dt a {
color: #c65157;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
z-index:9;
}

#menu li a:hover, #menu dt a:hover {
background-color: #c65157;
color: #FFFFFF;
z-index:9;
}
-->
</style>


<div id="menu">
	<dl>			
		<dt onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:setTimeout("montre()",1000);"><a href="">Menu 1</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>			
		<dt onMouseOver="javascript:montre('smenu2');"><a href="">Menu 1</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu3');"><a href="">Menu 3</a></dt>
			<dd id="smenu3">
				<ul>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
				</ul>

			</dd>
	</dl>
	

	
</div>

Le z-index fonctionne qu'avec le position:absolute;
la ton positionnement est dans le flux. Fixe ton menu et sa devrai aller.

Ah merci pour l'info, je viens de faire la correction, et maintenant le z-index est bien pris en compte.
Mais maintenant, toutes mes rubriques sont superposées, http://www.goodgame.fr/index_test.php

Comment corriger ça ?

Bon j'ai trouvé une solution, mais c'est surement pas propre du tout. Un tableau, avec dans chaque cellule, un des bloc-rubrique.

bah t'embète pas, masque la règle qui fonctionne sous IE
#xxxxx {
display:none;
}
et crée en une pour FF que IE ne verra pas en te servant de la proriété enfant qu'IE ne connait pas.
#xxxxx_ff {
color:ccc;
}
De cette manière tu peux même faire un affichage spécial FF (ou surprise)

ha oui pour décaler ton menu vers le haut c'est :
margin-top:-20px;

Forum d'entraide PHPFrance

Problème de menu CSS, z-index ?

Problème de menu CSS, z-index ?