滚动时jQuery下拉菜单位置答案

【问题标题】：jQuery drop down menu position while scrolling滚动时jQuery下拉菜单位置
【发布时间】：2012-10-07 15:17:45
【问题描述】：

我是 jQuery 新手，正在学习 jQuery 概念。目前，我正在尝试设计一个包含长列表项的自定义下拉菜单。我想在鼠标悬停到主菜单时滚动菜单。我正在尝试使用 jquery 滚动菜单自定义 CSS，该菜单描述 here 具有新的外观和感觉。

我已经尝试过该脚本，但我发现其中存在一些问题。您可以在 jsfiddle here 中查看它。当初始鼠标悬停到第一个列表项时，下拉列表项根本不显示（在初始页面加载中）。其次，第二级 UL 项的宽度被隐藏。

任何人都可以检查小提琴并纠正它吗？另外，请让我知道我做错了什么，以便我将来尝试纠正自己。

提前致谢。 :)

【问题讨论】：

你的问题是 CSS。使用来自 css-tricks 网站的原始 CSS 解决了您的问题。
是的，它解决了我的问题，但我想尝试在自定义设计的 css 中使用它。当我在纯页面中尝试脚本时，您可以查看屏幕截图 link 和 link 以清楚地了解问题。谢谢。

标签： jquery css drop-down-menu

【解决方案1】：

看看这个可能有帮助

ul.dropdown li:last-child a
{
  border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover
{
  background: #F3D673;
  color: black;
  position: relative;
  z-index:1;
}
ul.dropdown li a:hover{background: #F3D673;}

JQuery:

.mousemove(function(e) {
                var offset = $container.offset();
                var relativeY = ((e.pageY - offset.top) * multiplier) -   ($container.data("origHeight") * multiplier)+50;
                if (relativeY > $container.data("origHeight")) {
                    $list.css("top", -relativeY);
                    $list.css("zIndex", "-1"); //add this line 
                };
            });

DEMO

【讨论】：

感谢@afshin，但我已经尝试在纯 html 中进行修改，但下拉列表仍然存在填充问题。请查看我对最初问题的评论。再次感谢。 :)
现在，我面临另一个问题。只需检查这个小提琴link。主 div 环绕下拉菜单后 div 中的文本或任何内容。我该如何解决这个问题？
非常感谢！你让我很开心......荣誉...... :)