Bonjour à tous,
J'ai construit un menu horizontal en suivant un des tutoriels du site Alsacréations.
Mais lorsque je déroule mon menu, les éléments enfants de ma rubrique sont cachés par l'élement qui se situe en dessous.
Vous pouvez avoir un aperçu de mon problème sur ce lien : http://www.bonplanmaison.com/tests
Voici le code css de mon menu :
Et le code html :
Pouvez-vous m'expliquer pourquoi ??
je vous remercie beaucoup
J'ai construit un menu horizontal en suivant un des tutoriels du site Alsacréations.
Mais lorsque je déroule mon menu, les éléments enfants de ma rubrique sont cachés par l'élement qui se situe en dessous.
Vous pouvez avoir un aperçu de mon problème sur ce lien : http://www.bonplanmaison.com/tests
Voici le code css de mon menu :
.cssMenu
{
-position: relative;
float: right;
z-index:99999;
}
#menunav
{
width: 100%;
z-index:99999;
height: 20px;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
#menunav li
{
float: left;
z-index:99999;
width: 100px !important;
width: 90px;
margin: 0;
padding: 0;
border: 0;
text-align: center;
line-height: 15px;
font-size: 0.9em;
font-weight: bold;
letter-spacing: 2px;
display: block;
text-decoration: none;
background-color: #FFFFFF;
}
ul, li, a
{
display: block;
z-index:99999;
margin: 0;
padding: 0;
border: 0;
}
li.rubrique > ul
{
left: 140px;
z-index:99999;
}
/* others */
a
{
padding: 2px;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
width: 100%;
z-index:99999;
}
li > a
{
width: auto;
z-index:99999;
}
li a.first-rub
{
-background-color: #A1C442;
border: 1px solid #fff;
background: transparent url(images/design/tabright.gif) right top;
-position: absolute;
z-index:99999;
}
li a.second-rub
{
-top: 21px;
-left: 45px;
-position: relative;
z-index:99999;
font-size: 1em;
background-color: #A1C442;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background: transparent url(images/design/tabright.gif) right top;
}
/**/
/* regular hovers */
/**/
li a.second-rub:hover
{
z-index:99999;
-background-color: #6297BC;
background: transparent url(images/design/tabrighthover.gif) right top;
}
/**/
/* hovers with specificity */
/**/
li a.first-rub:hover
{
z-index:99999;
-background-color: #6297BC;
background: transparent url(images/design/tabrighthover.gif) right top;
}
li.rubrique:hover
{
z-index:99999;
}
ul ul, li:hover ul ul
{
z-index:99999;
display: none;
}
li:hover ul, li:hover li:hover ul
{
z-index:99999;
display: block;
}
Et le code html :
<div id="ctl00_menuItems" class="cssMenu">
<ul id="menunav">
<li class="rubrique"><a href="Default.aspx" class="first-rub" title="Accueil">Accueil</a></li>
<li class="rubrique"><a href="Univers.aspx?nom=Jardin" class="first-rub" title="Jardin">Jardin</a>
<ul>
<li class="rubrique"><a href="Categorie.aspx?nom=Parasols%20Chauffants" title="Parasols Chauffants" class="second-rub">Parasols Chauffants</a></li>
<li class="rubrique"><a href="Categorie.aspx?nom=Barbecues" title="Barbecues" class="second-rub">Barbecues</a></li>
</ul>
</li>
<li class="rubrique"><a href="Univers.aspx?nom=Eau" class="first-rub" title="Eau">Eau</a>
<ul>
<li class="rubrique"><a href="Categorie.aspx?nom=R%C3%A9cup%C3%A9ration%20d%27eau" title="Récupération d'eau" class="second-rub">Récupération d'eau</a></li>
</ul>
</li>
<li class="rubrique"><a href="Univers.aspx?nom=Recyclage" class="first-rub" title="Recyclage">Recyclage</a>
<ul>
<li class="rubrique"><a href="Categorie.aspx?nom=Traitement%20des%20d%C3%A9chets" title="Traitement des déchets" class="second-rub">Traitement des déchets</a>
</li>
</ul>
</li>
<li class="rubrique"><a href="Univers.aspx?nom=Solaire" class="first-rub" title="Solaire">Solaire</a>
<ul>
<li class="rubrique"><a href="Categorie.aspx?nom=Chauffage" title="Chauffage" class="second-rub">Chauffage</a>
</li>
<li class="rubrique"><a href="Categorie.aspx?nom=Eclairage" title="Eclairage" class="second-rub">Eclairage</a></li>
</ul>
</li>
</ul>
</div>
Pouvez-vous m'expliquer pourquoi ??
je vous remercie beaucoup