problème de z-index avec jquery .show()

Question

J'ai un problème épouvantable avec la fonction .show() de jQuery.

J'ai une barre de navigation en haut de ma page Web. Lorsque vous survolez le dernier élément de la barre de navigation, un menu secondaire doit apparaître en dessous. Cette partie fonctionne à merveille.

Le code jQuery ressemble à ceci :

$('#navbar li.etc').hover(
    function() { 
        $('#subnav').show();
        $('li.etc a.main').addClass('hover');
    },
    function() { 
        $('#subnav').hide(); 
        $('li.etc a.main').removeClass('hover');
    }
);

Le code HTML ressemble à ceci :

<ul id="navbar">
    <li><a href="#">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">developers</a></li>
    <li><a href="#">pricing</a></li>
    <li class="etc"><a class="main" href="#">etc &raquo;</a>
    <ul id="subnav">
        <li><a href="#">api</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">careers</a></li>
        <li><a href="#">twitter</a></li>
    </ul>
    </li>
</ul>

Et le CSS ressemble à ceci :

#navbar {
    position: absolute;
    height: 30px;
    /*width: 455px;*/
    right: 85px;
    bottom: 40px;
}

#navbar li {
    float: left;
    list-style: none;
    padding: 2px 5px 12px 5px;
    margin-right: 5px;
    border-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border: 1px solid #50A6C8;
}

    #navbar li.etc:hover {
        background: #9DD3E7;
        color: #203C4D;
        border: 1px solid gray;
    }

        #navbar li a {
            margin: 0px auto 0px auto;
            list-style: none;
            /*color: #325E77;*/
            color: white;
            font: 1.8em "Helvetica", "Lucida Grande", Serif;
            text-decoration: none;
        }

        #navbar li a:hover {
            color: #203C4D;

        }

        #navbar li a.hover {
            color: #203C4D;
        }

#subnav {
    display: none;
    position: absolute;
    right: 5px;
    top: 35px;
    width: 340px;
    border-radius: 5px;
    border-top-right-radius: 0px;
    -moz-border-radius: 5px;
    -moz-border-radius-topright: 0px;
    padding: 13px 13px 5px 13px;
    font: .9em "Helvetica", "Lucida Grande", Serif;
    background: #9DD3E7;
    z-index: 1;
    box-shadow: 5px 5px #888;
    -moz-box-shadow: 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    border: 1px solid gray;
}

#subnav li {
    float: left;
    list-style: none;
    margin: 0px auto 0px auto;
    border: none;
}

    #subnav li a {
        padding: 2px 8px 2px 8px;
        text-decoration: none;
        color: #325E77;
    }

    #subnav li a:hover {
            color: #203C4D;
    }

J'ai un problème avec la bordure et le z-index. J'ai une bordure sur la div subnav, et une bordure sur le haut et les côtés de l'élément navbar. Ce que je voudrais, c'est que le subnav apparaisse, en utilisant .show(), et qu'il apparaisse SOUS l'élément de la barre de navigation ("etc" dans ma page), de façon à ce qu'il ait l'air d'un seul élément homogène. Mais pour l'instant, la barre secondaire apparaît AU-DESSUS du dernier élément de la barre de navigation, ce qui fait apparaître la bordure. Voici un exemple en ligne :

[lien expurgé]

J'ai beaucoup joué avec les propriétés z-index de chaque élément, mais je n'arrive pas à le faire correctement. J'ai trouvé un certain nombre de ressources traitant d'une sorte de problème impliquant le z-index et IE, mais mon problème existe dans les navigateurs webkit et mozilla. Ces ressources ne m'ont donc pas beaucoup aidé.

Quelqu'un a-t-il une suggestion à faire ? Je m'arrache les cheveux avec ce problème ! Merci.

Answer 1

Votre problème se produit parce que subnav est un élément enfant de l'élément de liste etc Il ne pourra donc jamais se trouver "en dessous", quelle que soit la façon dont vous jouez avec les z-index.

Ce que vous pouvez essayer de faire, c'est de le détacher du fait d'être sous le <li> et le positionner absolument.