上：100％而不是上：0（数学问题？）

Question

我正在使用Chris Coyier's 'long drop-down' plug-in来解决我的（长）下拉列表问题。顺便说一句，我使用的是top: 100%而不是top: 0，因此我的下拉菜单位于主菜单上方。

问题

普通菜单

The expected

jQuery部分：

$(function () {
            var maxHeight = $(window).height() - ($("ul.dropdown").offset().top + $("ul.dropdown").outerHeight());

            $("ul.dropdown > li").hover(function () {
                var $container = $(this),
                 $list = $container.find("ul"),
                 $anchor = $container.find("a"),
                 height = $list.height() * 1.1,       // make sure there is enough room at the bottom
                 multiplier = height / maxHeight;     // needs to move faster if list is taller

                // need to save height here so it can revert on mouseout            
                $container.data("origHeight", $container.height());

                // so it can retain it's rollover color all the while the dropdown is open
                $anchor.addClass("hover");

                // make sure dropdown appears directly below parent list item    
                $list
                    .show();

                // don't do any animation if list shorter than max
                if (multiplier > 1) {
                    $container
                        .css({
                            overflow: "hidden"
                        })
                        .mousemove(function (e) {
                            var offset = $container.offset();
                            var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                            if (relativeY > $container.data("origHeight")) {
                                $list.css("top", -relativeY + $container.data("origHeight"));
                            };
                        });
                }
            }, function () {

                var $el = $(this);

                // put things back to normal
                $el
                    .height($(this).data("origHeight"))
                    .find("ul")
                    .css({ top: "100%" })
                    .hide()
                    .end()
                    .find("a")
                    .removeClass("hover");
            });
        });

更新

JS Fiddle

在JS Fiddle上，尝试更改top:100%的{​​{1}} ul.dropdown ul规则 - 这是我的问题。

更新v2

删除了无用的内容。

更新v3

谢谢大家的帮助 - 现在我可以更好地解决我的问题了。

Look to this Fiddle - 这是我的问题。

And this is what I'm expecting

Answer 1

完全删除top规则将强制绝对定位的子菜单从主菜单元素结束的高度开始（这是所需的行为）。这看起来与top: 100%;相同，但根据我的理解，您希望摆脱该规则。

请在此处查看：http://jsfiddle.net/wB7fn/4/

修改

尽可能接近：http://jsfiddle.net/wB7fn/9/。

主要元素宽度的问题必须通过手动扩展它来解决，以便所有子菜单元素都适合。就像我在评论中描述的那样 - 父元素需要position: relative和适当的z-index。最后一项更改是制作主菜单a的{​​{1}}元素，因此它会填充父display: block元素的整个宽度。

EDIT2

此处修复了JS li问题：http://jsfiddle.net/wB7fn/10/