jQuery下拉菜单位置滚动 [英] jQuery drop down menu position while scrolling

问题描述

我刚接触jQuery和学习jQuery概念。目前，我想设计一个自定义下拉菜单，其中有长列表项。我想滚动菜单，鼠标滑到主菜单。我尝试使用jquery滚动菜单自定义CSS，其中介绍了此处的全新外观和感觉。

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.

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

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.

任何人都可以检查一下小提琴并纠正吗？此外，请让我知道，我错了，以便我将尝试改正自己在未来。

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.

提前感谢。 ：）

推荐答案

检查这可能有用

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

这篇关于jQuery下拉菜单位置滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！