javascript - 长下拉菜单在悬停时拉背景

Question

我使用的菜单是专门为那些希望显示大量链接而又不会在浏览器下方消失的人们设计的。相反，一旦菜单达到最大高度，用户就可以在其中滚动。

一旦达到这个高度，菜单就会调用 javascript 来创建这个“子菜单”，但是，当这样做时，会将菜单的背景下拉到内部菜单的底部，当我将鼠标悬停在远离它的地方时， ul 的宽度已扩展。

我创建了一个 fiddle 来演示:

http://jsfiddle.net/H3Gb3/

请使用 jQuery 1.6.4 来查看它的工作情况。

它的样子就是我想要的样子。如果您首先将鼠标悬停在普通菜单 上，这也是我希望它对长菜单作出 react 的方式。但是，如果您尝试前两个菜单 - 超过最大高度并为子菜单执行 js，它们会扭曲整个菜单。我使用了渐变背景，这样您可以更好地理解正在发生的事情。此外，您会注意到悬停后，它们不会返回同一个地方。

我不知道是什么原因造成的。起初我以为这是一个 z-indez 问题，但通过反复试验未能发现问题。

我在这里搜索了一个解决方案，发现其他人正在使用这个菜单并且遇到了与我相同的问题，但没有人可以提供解决方案。

谁能告诉我到底发生了什么扭曲了菜单？是 CSS 问题吗？

Answer 1

检查一下:http://jsfiddle.net/H3Gb3/2/

我在这里更改了你的代码:

 $container
       .css({
           height: maxHeight,
           width: "250px",
           overflow: "hidden"
        })

到

$container
       .css({
          width: "250px",
        })