Javascript 多级下拉菜单不工作

我有一个下拉菜单，可以在第一级工作。但我无法显示菜单的第二级。谢谢你的帮助

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的一个问题：

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

视频//这是无效的
录像带

不是有效的html

你有网上的例子吗

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

---

我遇到的第一个问题之一是使用

#nav ul li{overflow:hidden}

。这意味着溢出

li

（如子菜单）的所有内容都将被隐藏。除此之外，您还必须为最低级别的菜单添加一些定位。

它仍然需要一些整理，但三级菜单未显示的问题是，

#nav ul li

设置了

溢出：隐藏

，无论三级菜单隐藏了什么。删除该选项可以修复问题。在下面的演示中，我也对JS做了一些调整

---

演示：

除了上面指出的HTML错误外，CSS也不完整，您已将所有子列表定位为左对齐。。因此，它们实际上正好位于彼此的顶部，加上您已将child li的设置为

overflow:hidden
jQuery有点错误，它会在第一个列表悬停时立即删除所有的子项，我想你只是想在它的直接父项悬停时显示

经修订的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>


$（文档）.ready（函数（）{
$（“#nav li”）。悬停(
函数（）{
儿童(ul),法代因(250),；
}，函数（）{
美元。儿童（“ul”）。淡出（250）；
})；//悬停
});// 文件准备就绪
请详细说明您现在正在做什么，哪些功能正常，哪些功能正常？菜单的第一部分工作正常。例如，当我把鼠标悬停在教育上时，会出现一个下拉菜单。我希望材料成为第二个下拉列表。有一个视频和演示的下拉菜单。你可以用它来测试你的代码，并让人们在这里查看。karrn.org是网站。我在HTML编辑器中没有收到任何错误，说我的HTML无效。@hoot我在firefox中使用HTML验证程序时收到很多警告，但无论如何，你不能将文本直接放在
ul
标记下面，它需要放在
li
标记中。关于你的网站，那里没有二级菜单。我知道，我正在尝试将其设置为二级菜单，这是我的问题：/我必须对其进行更改，所有这些都是第一级菜单。
#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>