在jquery中定位元素 – 没有向上/向下滑动

jquery的新手。 希望显示/隐藏水平菜单栏项。 我已经尝试了几次迭代但没有成功。

CSS正在工作和样式化,并且javascript在onload事件中将lia标记类设置为“活动”。 我错过了什么? 我总结错误是在jquery中,虽然它不能简单得多。 解释很有帮助。 我很感激使用现有html的建议。

div id = menu的主要目的是启用条形中心。

我的剧本

编辑1

  $(document).ready(function() { $('#nav li').hover(function() { //show its submenu $('ul', this).slideDown(100); }, function() { //hide its submenu $('ul', this).slideUp(100); }); });​ 

我的Html

  

您现有的代码似乎工作正常,请参阅DEMO

编辑

根据您的反馈,我做了一些更多的研究,我发现你的CSS干扰了动画。

如果您查看上面链接的原始演示,其中没有样式,您会看到向下滑动/向上按照指定的100毫秒。

如果你用CSS查看你的DEMO ,你会看到菜单出现。

经过一番试验和错误后,我确定了导致这种情况的CSS。 如果从CSS中删除以下部分,则子菜单的动画将按预期再次运行。

 /* Make the sub menus appear on hover */ #menu ul li:hover ul, #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ } 

上面的CSS从下滑/上下滑动方法覆盖动画,只是将子菜单显示为块。 它仍然有效,如果您保留IE6修复,但您必须删除#menu ul li:hover ul的CSS #menu ul li:hover ul

 /* Make the sub menus appear on hover */ #menu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ } 

我将这些变化应用于小提琴,它现在正在运作。
DEMO