jquery中的目标元素-无向上/向下滑动

jquery的新特性。需要显示/隐藏水平菜单栏项。我尝试了几次迭代都没有成功

CSS正在工作并设置样式，javascript在onload事件中将

li

和

a

标记类设置为“active”。我错过了什么？我的结论是错误在jquery中，尽管它不能简单得多。解释很有帮助。我将感谢使用现有html的建议

div id=菜单的主要用途是使条形图居中

我的剧本

编辑1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

$（文档）.ready（函数（）{
$（'#nav li'）。悬停（函数（）{
//显示其子菜单
$（'ul'，此）.slideDown（100）；
}，函数（）{
//隐藏其子菜单
$（'ul'，this）.slideUp（100）；
});
});​

我的Html

<div id="menu">
    <ul id="nav">
        <li id="lhome" class="">
            <a href="index.php" id="ahome" class="">Home</a>
        </li>
        <li id="lprod" class="">
            <a href="products.php" id="aprod" class="">Products</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="ltest" class="">
            <a href="testimonial.php" id="atest" class="">Testimonials</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="lcont" class="">
            <a href="contact.php" id="acont" class="">Contact&nbsp;Us</a>
        </li>
    </ul>
</div>

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

编辑

根据你的反馈，我做了更多的研究，发现你的CSS干扰了动画

如果你看我上面链接的原始演示，它没有任何样式，你会看到向下/向上滑动需要100毫秒

如果你用CSS查看你的菜单，你会看到菜单刚刚出现

经过一点尝试和错误，我查明了造成这种情况的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补丁，它仍然有效，但您必须删除

菜单ul li:hover ul的CSS

：

/* 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 */
}

我将更改应用于小提琴，它现在正在工作。

---

看

我觉得不错。有控制台错误吗？你能设置一个JS提琴来说明这个问题吗？你能发布你所有的HTML吗？您确定正在加载jQuery库吗？@Utkanos没有控制台错误。我还没有使用JS小提琴。将CSS插入下面Francois的演示中，查看下面的演示链接，了解CSS代码和非工作jquery。感谢所有的评论。@François Wahl有一个jQuery的工作演示。jsfiddle.net/urhDr/8到底是什么问题？感谢Francois的帮助。我插入了我的CSS，它的行为和我所经历的一样。有没有办法将CSS保存到该演示中？我想我发现了“更新”。你能在那里看到吗？@DavidC:当你点击“更新”时，url就会更新，你可以发布它。不过我想我找到了：小提琴看起来不错。我在Chrome中使用它。菜单在悬停时打开。这不是你所期望的吗？@DavidC：我不确定我是否理解这个问题。在演示中，当您将鼠标悬停在

产品

或

证明

上时，会弹出附加菜单。当您说“无任何更改”时，子菜单是否不为您显示？或者你认为它出现后还会发生什么事？@DavidC：我终于找到了原因。这是你的CSS。在CSS中，当鼠标悬停在子菜单上时，指定子菜单显示为块。这将覆盖动画并将

ul

显示为块。