Question

目前正在开发一个包含带有jQuery的下拉导航菜单的网站。但是我有一个问题，当我将鼠标悬停在父链接上时，下拉列表没有显示在其他元素之上...我认为很明显这是一个z索引问题，但我一直难以接受现在所以任何帮助都会受到赞赏。

HTML

<div class="navigation">

<ul>
    <li><a href=\"index.php\">Link 1</a></li>
    <li><a href=\"#\">Parent 1</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
</ul>

</div>

CSS

.navigation {
    position:relative;
    background-color:#4F4F4F;
    width:100%;
    min-width:910px;
    box-shadow: 0px 2px 3px rgba(0,0,0, .4);
    z-index:10;
    overflow-y:hidden;
    overflow-x:auto;
    height:auto;
}

.navigation ul {
    margin:0;
    padding:0;
    list-type:none;
    text-align:center;
    position:relative;
}

.navigation ul li {
    display:inline-block;
    padding-left: 52px;
    position:relative;
    z-index:11;
}

.navigation ul li a {
    display:block;
    height:29px;
    color:#fff;
    text-decoration:none;
    font-family: cabinmedium;
    font-size:13px;
    padding-top:18px;
    position:relative;
    z-index:11;
}

.navigation ul ul {
    position:absolute;
    width:auto;
    display:none;
    box-shadow: 0px 1px 1px #999;
    margin-left:-10px;
    background-color:#89c63b;
    text-align:left;
    padding-left:10px;
    padding-right:10px;
    z-index:11;
}

.navigation ul ul li {
    display:block;
    background-color:#89c63b;
    padding:0;
    width:auto;
    min-width: 100px;
    position:relative;
    z-index:11;
}

的jQuery

$(document).ready(function() {

    $(".navigation ul li").hover(function() {

        $(this).find("ul").stop().fadeToggle(400);

    })

});

注意：我刚才包含了jQuery，但我已经测试过，它确实会根据需要淡入/淡出导航元素。

任何想法？

Answer 1

'navigation'类将如下所示，没有'overflow-y'，'overflow-x'

.navigation {
      position: relative;
      background-color: #4F4F4F;
      width: 100%;
      min-width: 910px;
      box-shadow: 0px 2px 3px rgba(0,0,0, .4);
      z-index: 10;
      /* overflow-y: hidden; */
      /* overflow-x: auto; */
      height: auto;
    }

demo

jQuery导航下拉菜单没有显示...任何想法？

1 个答案: