javascript - 多级下拉菜单不起作用

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

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

演示: jsfiddle.net/Marcel/kydTs