Javascript 长下拉菜单将背景拉到悬停状态

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

一旦它达到这个高度，菜单调用javascript来创建这个“子菜单”，但是，当这样做时，会将菜单的背景拉到内部菜单的底部，当我将鼠标悬停在远离它的位置时，

ul

的宽度会扩大

我已经创建了一个小提琴演示：

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

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

我不知道是什么原因造成的。我起初认为这是一个z-indez问题，但经过反复试验，还没有发现一个问题

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

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

请查看以下内容：

我在这里更改了您的代码：

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

到

---

我想这是因为您正在设置包含

li

的容器的高度，这扩展了整个容器的高度。您应该在这里为后代提供代码。谢谢mzedeler，我将添加它作为编辑。只需添加--height:35px；--到--#换页--谢谢。这似乎已经完成了拉BG的技巧。有没有办法绕过扩展宽度的后悬停？删除

width:250px

谢谢，我不敢相信我没有尝试过-我在JS中玩了一段时间。我只给它添加一个z索引，使它位于菜单其余部分的前面。@user3583173有时需要第二双眼睛。

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