Question

我正在重新设计网站，我的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;
}

JS

$（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>

Answer 1

您遗失#nav而不是#menu。

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

Answer 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，所以没有必要使用它。）。这种方式更加实用。也只需在CSS文件中设置z-index。

Answer 3

更改以下内容

$("#nav li").hover(

到

$("#menu li").hover(

Answer 4

将您的jquery代码更新为

$(document).ready(function() {

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

});

Javascript下拉菜单无效

4 个答案: