多级下拉菜单不起作用

Question

我有一个下拉菜单，在第一级工作。但我无法获得菜单的第二层显示。感谢帮助。

的JavaScript

<script type="text/javascript"> 
$(document).ready(function() { 
$('#nav li').hover(
function() { 
//show submenu 
$('ul', this).css({zIndex:90}).fadeIn(150); 
}, 
function() { 
//hide submenu 
$('ul', this).fadeOut(150); 

} 
); 

HTML

<input type="hidden" name="arav" /><ul id="nav"> 
<li> <a href="index2.html">Home</a> 
</li> 
<li> <a href="personnel.html">Who We Are</a> 
</li> 
<li> <a href="#">Neurologic Condition</a> 
<ul> 
<li><a href="sci.html">SCI</a></li> 
<li><a href="tbi.html">TBI</a></li> 
<li><a href="stroke.html">Other</a></li> 
</ul> 
</li> 
<li> <a href="">Education</a> 
<ul> 
<li><a href="healthed.html">Health Education</a></li> 
<li><a href="#"> Materials</a> 
<ul>Videos 
<li>Videos</li> 
<li>Presentation</li> 
<li>Movies</li> 
</ul> 

</li> 

<li><a href="sciinfosheets.html">SCI Info Sheets</a></li> 
</ul> 
</li> 
<li> <a href="stroke.html">Resources</a> 
<ul> 
<li><a href="statelevel.html">State Level</a></li> 
<li><a href="nationallevel.html">National Level</a></li> 
<li><a href="resourcesbycoutny2.html">Community Level</a></li> 
</ul> 
</li> 

<li> <a href="research.html">Research</a></li> 

<li> <a href="contactus.html">Contact Us</a> 
</li> 
</ul> 

CSS

#nav { 
margin:0; 
padding:0; 
list-style:none; 
behavior: url(border-radius.htc); 

} 

/*LI display inline */ 
#nav li { 
float:left; 
display:block; 
width:7em; 
background:#0063dc; 
position:relative; 
z-index:500; 
margin:0 1px; 
} 

/*parent menu*/ 
#nav li a { 
display:block; 
padding:5px 5px 5px 5px; 
font-weight:700; 
height:38px; 
text-decoration:none; 
color:#696969; 
text-align:center; 
color:#ffeecc; 
} 

#nav li a:hover 
{ 
color:#eeeeee; 
} 

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

#nav ul li 
{ 
width:7em; 
float:left; 
overflow:hidden; 
border-top:1px solid #eeeeee; 
} 

#nav ul a 
{ 
display:block; 
height:32px; 
padding: 7px 4px; 
color:white; 
} 

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

Answer 1

这可能只是你的HTML问题：

<li><a href="#"> Materials</a> 
<ul>Videos     // this is not valid 
<li>Videos</li> 

是无效的html。

你有网上的例子吗？

编辑：我在jsfiddle中添加了一个示例。

我遇到的第一个问题之一是您使用#nav ul li { overflow: hidden }。这意味着所有溢出li（如子子菜单）的内容都将被隐藏。除此之外，您将不得不为最低级菜单添加一些定位。

Answer 2

它仍然需要一些整理，但三级菜单没有显示的问题是#nav ul li有overflow:hidden设置，哪些隐藏三级菜单。删除它可以解决问题。我也在下面的演示中稍微调整了JS。

演示：jsfiddle.net/Marcel/kydTs

Answer 3

除了HTML错误上面指出的，CSS是不完整或者，你已经有了定位出现靠左所有子列表..所以他们实际上只是在上面对方加你有孩子李的设置为overflow: hidden;，所以他们的孩子也隐藏

jQuery有点不对，它会放下所有的孩子li s第一个列表被搁置上，我推定你只是想当它的直接父母被徘徊时出现？

修改CSS：

#nav { 
margin:0; 
padding:0; 
list-style:none; 
behavior: url(border-radius.htc); 
} 

#nav {width: 100%;} 
#nav ul, #nav li {width: 7em;} 

/*LI display inline */ 
#nav li { 
float:left; 
background:#0063dc; 
position:relative; 
z-index:500; 
margin:0 1px; 
text-align:center; 
} 

/*parent menu*/ 
#nav li a { 
display:block; 
padding:5px 5px 5px 5px; 
font-weight:700; 
height:38px; 
text-decoration:none; 
color:#ffeecc; 
} 

#nav li a:hover { 
color:#eeeeee; 
} 

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

#nav ul {left: 0;} 
#nav ul ul {left: 100%; top: 0;} 

#nav ul li { 
/*overflow:hidden;*/ 
border-top:1px solid #eeeeee; 
} 

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

#nav ul a { 
display:block; 
height:32px; 
padding: 7px 4px; 
color:white; 
} 

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

经修订的脚本：

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#nav li").hover(
     function() { 
     $(this).children("ul").fadeIn(250); 
     },function(){ 
     $(this).children("ul").fadeOut(250); 
    });//hover 

});// document ready 
</script>