Top: 100%而不是top: 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上，尝试更改top: 0的top:100% of 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元素设置为display: block，这样它将填充父li元素的整个宽度。

EDIT2

这里也修复了JS top的问题：http://jsfiddle.net/wB7fn/10/