Javascript下拉菜单不起作用[关闭]答案

【问题标题】：Javascript drop-down menu not working [closed]Javascript下拉菜单不起作用[关闭]
【发布时间】：2012-07-13 12:48:55
【问题描述】：

我正在重新设计网站，但我的 CSS/javascript 出了点问题，无法弹出下拉菜单。 JS打错了，上面的JS不行了。

CSS

#menu {
font-size:large;
margin:0;
padding:0 0 0 .5em;
list-style:none;
width:100%;
text-align:left;
}


#menu ul, #menu li {
padding:0 0 0 2em;
background-color:gray;
width:auto;
border-bottom:1 gray solid;
}

/*LI display inline */
#menu li {
float:left;
background:white;
position:relative;
list-style:none;
margin:0 0 0 0;
text-align:center;

}

/*parent menu*/
#menu li a {
display:block;
padding:0 0 0 0;
height:40px;
font-weight:200;
float:left;
text-decoration:none;
text-align:center;
color:black;
border:1 1 1 1;
}

#menu li a:hover {
color:#eeeeee;
text-align:center;
}

/* style for default selected value */ 
#menu a.selected {
color:#6699FF;
}
/* submenu */ 
#menu ul {
position:absolute;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
text-align:center;
}

#menu ul {
left: 0;
}
#menu ul ul {
top: -1px;
background:0063dc;
text-align:center;
color:black;
font-weight:200;
text-align:center;
}

#menu ul li {
/*overflow:hidden;*/
border-top:1px solid #eeeeee;
height:25px;
margin:0 0 0 -1px;
}

#menu ul li:hover {
position: relative;
}

#menu ul a {
display:block;
color:white;
}

#menu ul a:hover {
text-decoration:none;
}

$(document).ready(function() {

$("#menu ul").hover(
    function () {
    $(this).children("li").css({zIndex:90}).fadeIn(250);
    },function(){
    $(this).children("li").fadeOut(250);
});//hover

}); HTML

 <input type="hidden" name="arav" />
                    <ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">MEMBERS</a></li>
    <li><a href="#">FACTS</a></li> 
    <li><a href="#">TEST</a></li>
    <li><a href="#">EDUCATION</a></li>
    <li><a href="#">RESOURCES</a></li>
    <li><a href="#">RESEARCH</a></li> 
    <li><a href="#">CONTACT US</a></li>



</ul>

【问题讨论】：

你想通过写$('#nav li')来选择什么？ #nav 没有包装元素。此外，lis 在您尝试选择时不会有 ul 类型的子代。
会出现什么？什么是父母，谁是孩子？我所看到的只是父项，而您的代码仅反映了使该项消失的悬停效果。
有的话放完整的html代码

标签： javascript jquery html css

【解决方案1】：

您缺少#nav 而您拥有#menu。

将 javascript 代码中的 #nav 更改为 #menu 或将 HTML 中的 id="menu" 更改为 id="nav"。

【讨论】：

【解决方案2】：

在你的代码中你是你的，然后是你的 JavaScript 作为 $('#nav not menu :) 可能是这样，尝试一下，让我知道你的进展情况

更新

试试这个代码

$(document).ready(function() {

    $("#menu li").hover(function () {
      $(this).fadeIn(250);
    },function(){
      $(this).fadeIut(250);
    });//hover

});// document ready

因为你已经在jquery中选择了使用#menu li，所以不需要使用这个).children。这种方式实用得多。也只需在 CSS 文件中设置 z-index。

【讨论】：

是的，我确实需要在 CSS 中设置 z-index。这是一个 IE 修复，因为如果不这样做，动画在 IE 中看起来很时髦。

【解决方案3】：

更新你的 jquery 代码到

$(document).ready(function() {

    $("#menu ul").hover(
        function () {
        $(this).children("li").css({zIndex:90}).fadeIn(250);
        },function(){
        $(this).children("li").fadeOut(250);
    });//hover

});

【讨论】：

我之前尝试过，但它也不起作用：/
li 是 ul 的孩子。在您的代码中，您将 ul 视为 li 的孩子
在此下拉列表中，ul 是 li 的子级 - 因为您要定位第二级 ul。
我的答案中有一个代码示例删除了对子项的使用，这不是必需的:)

【解决方案4】：

更改以下内容

$("#nav li").hover(

到

$("#menu li").hover(

【讨论】：