Jquery下拉菜单奇怪的行为

Question

My Problem (Fiddle)

我的问题是，在我的jquery动画下拉菜单中，当您将鼠标悬停在“其他”链接上时，子菜单不会出现。当使用firefox来“检查元素”时，我发现高度是动画的，宽度似乎没问题，但我看到的只是左边框。

我注意到，如果我将该特定部分显示为块，则在显示第一个菜单的动画时会显示，但是在输入无序列表时，它会消失（ex）。我想它在某种程度上与此有关，但我无法弄清楚造成这种情况的原因。

任何煽动我可能只是俯视的东西都会很棒，当然非常感激。

备注：

• 我在Firefox，Chrome，Opera和IE中遇到过这个问题。
• 它的设计使它只能用于css。第一个.each覆盖了默认的css悬停行为。
• 空跨度包含箭头图像。
• 仅发布相关代码。但是，您可以查看我的网站here
• 如果您有任何关于提高效率的建议，请随时欢迎。

Answer 1

http://jsfiddle.net/sailorob/4cdTV/5/

为了简单起见，我删除了您的CSS，并通过使用jQuery slideUp和slideDown简化了您的功能，它实际上处理了您使用函数管理的许多css属性。从这里开始，我认为在一些CSS中工作会相当简单。

在菜单上使用javascript / jQuery / animation时，我强烈建议使用计时器（setTimeout）来发射鼠标和叶子。这样，当用户意外地将鼠标移出菜单并关闭时，菜单会更加宽容。

Answer 2

好吧，在调试JS和CSS时，我发现如果你删除所有JS ，那么带子菜单的下拉菜单工作正常。其他 li 打开它下面的 ul 就好了。注意，虽然没有JS，但它没有动画效果。

Here's a forked fiddle.

我在最新的Chrome和Firefox中测试了它。