Voilà: J'ai créé un menu déroulant en HTML et CSS (pas droit au javascript). Quand les sous-menus s'affichent (pour l'instant, j'ai juste mis des tests), ils font descendre le "div" qui se trouve dessous au lieu de s'afficher par-dessus. Que dois-je faire pour corriger ce défaut?
Voici mon code:
HTML
Code : Tout sélectionner
<ul class="menuDeroulant">
<li><a href="#" class="selectPrincipal">Accueil</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li><a href="Histoire-1.html">Histoire</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li><a href="Fetes-1.html">Fêtes, jeux et divertissements</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li><a href="Masques-1.html">Les masques</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li><a href="Galerie.html">Galerie Photo</a>
<ul class="sousMenu">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
</ul>
CSS
Code : Tout sélectionner
menuDeroulant {
width: 900px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
.menuDeroulant li {
float: left;
width: 150px;
margin-left: 3%;
-moz-box-shadow:0 0 1px #FFF;
-webkit-box-shadow:0 0 1px #FFF;
box-shadow:0 0 1px #FFF;
}
.menuDeroulant li a:link, .menuDeroulant li a:visited {
display: block;
background:rgba(173, 182, 199, 0.5);
border:1px solid #3a79cf;
color:#3a79cf;
border-top-color:#3a79cf;
margin: 0;
padding: 4px 8px;
text-decoration:none;
}
.menuDeroulant li a:hover {
background:rgba(255, 255, 255, 0.8);
color:#3a79cf;
}
.menuDeroulant .sousMenu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
.menuDeroulant .sousMenu li {
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border:1px dashed #3a79cf;
background:rgba(58, 121, 207, 0.5);
margin-top: 2%;
}
.menuDeroulant .sousMenu li a:link, .menuDeroulant .sousMenu li a:visited {
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent;
}
.menuDeroulant .sousMenu li a:hover {
background:rgba(255, 255, 255, 0.8);
color:#3a79cf;
}
.menuDeroulant li:hover > .sousMenu {
display: block;
}
.menuDeroulant li a.selectPrincipal {
color:#3a79cf;
background:rgba(255, 255, 255, 0.8);
}
