Javascript下拉菜单不工作

-4

我正在做一个网站重新设计，并且我的CSS/javascript出现问题，我无法弹出下拉菜单。我在输入JS时犯了一个错误，现在JS上有什么不起作用。Javascript下拉菜单不工作

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; 
}

$（文件）。就绪（函数（）{

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

来源

2012-07-13 wootscootinboogie

什么是你想通过写'$（ '＃导航礼'）来选择'？没有'＃nav'的包装元素。当你尝试选择时，'li's将不会有'ul'类型的孩子。 – m90 2012-07-13 12:51:51

什么期待弹出？什么是父母，谁是孩子？我所看到的只是父项，您的代码仅反映了淡化项目的悬停效果。 – anAgent 2012-07-13 12:53:25

把完整的html代码，如果有一个 – 2012-07-13 12:56:35

你缺少#nav，而不是你有#menu。

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

来源

2012-07-13 12:51:39 Kishore

在你的代码你和那么你的JavaScript作为$（'＃导航菜单不:) 这可能是它，尝试，让我知道你上车

UPDATE

试试这个代码

$(document).ready(function() { 

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

});// document ready

因为你已经选择使用#menu李在jQuery的，也没有必要使用这个）。孩子。这种方式更实用。也只需在你的CSS文件中设置z-index。

来源

2012-07-13 12:53:35

是的，我确实需要在CSS中设置z-index。这是一个IE修补程序，因为动画在IE中看起来很时髦而没有这样做。 – wootscootinboogie 2012-07-13 13:02:20

更改以下

$("#nav li").hover(

到

$("#menu li").hover(

来源

2012-07-13 12:54:11

更新您的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-13 12:54:11

我以前试过，它也不能正常工作：/ – wootscootinboogie 2012-07-13 12:55:32

李是ul的孩子。在您的代码中，您正在考虑将ul作为li的子项 – 2012-07-13 12:56:09

在这个下拉列表中，'ul' **是** li的子项 - 因为您想要定位第二个'ul'级别。 – Christoph 2012-07-13 12:58:14

Javascript下拉菜单不工作

回答

相关问题