滚动时jQuery下拉菜单位置

I'm new to jQuery and learning jQuery concepts. Currently, I'm trying to design a custom drop down menu which has long list items. I wanted to scroll the menus while mouse over to the main menu. I'm trying to customize the CSS with the jquery scroll menu which described here with a new look and feel.

我是jQuery的新手,也是学习jQuery概念的人。目前,我正在尝试设计一个包含长列表项的自定义下拉菜单。我想在鼠标滑动到主菜单时滚动菜单。我正在尝试使用jquery滚动菜单自定义CSS,这里描述了一个新的外观和感觉。

I have tried the script, but i found some issues in it. You can check it in jsfiddle here . While initial mouseover to the first list item, the drop down list items are not displaying at all (In an initial page load.) Secondly, the width of the second level UL item is getting hidden.

我试过这个剧本,但我发现了一些问题。你可以在这里查看jsfiddle。在初始鼠标悬停到第一个列表项时,下拉列表项根本不显示(在初始页面加载中)。其次,第二级UL项的宽度被隐藏。

Can anyone please check the fiddle and correct it? Also, please let me know, where I did wrong, so that I will try to correct myself in the future.

任何人都可以检查小提琴并纠正它吗?另外,请告诉我,我做错了,以便我将来尝试纠正自己。

Thanks in advance. :)

提前致谢。 :)

1 个解决方案

#1

Check this out maybe helpful

检查出来可能有帮助

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

#1