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>