-5

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

$(文档).ready(函数() {

$("#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>
4

4 回答 4

3

你失踪了，#nav而不是你有#menu。

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

于 2012-07-13T12:51:39.443 回答
1

在你的代码中你是你的，然后是你的 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。

于 2012-07-13T12:53:35.433 回答
0

更改以下内容

$("#nav li").hover(

至

$("#menu li").hover(
于 2012-07-13T12:54:11.730 回答
0

将您的 jquery 代码更新为

$(document).ready(function() {

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

});
于 2012-07-13T12:54:11.530 回答