多級下拉菜單不起作用

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>