jQuery导航下拉菜单未显示..任何想法

jQuery navigation drop-down menu not showing... any ideas?

本文关键字：任何想 显示 导航 下拉菜单 jQuery      更新时间：2023-09-26

目前正在开发一个包含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只是以防万一，但我已经测试过了，它确实会根据需要淡出导航元素。

有什么想法吗？

"导航"类将像下面的代码一样，没有"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;
    }

演示

相关文章：