28172 sujets

CSS et mise en forme, CSS3

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 :



.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
Oui je m'en suis aperçu, mais de toute façon, je fais mon site pour qu'il fonctionne sous IE7 et FF, et je fais le mieux possible pour IE6, en sachant que je n'arriverai jamais à la perfection.

Merci quand même