Question

我正在尝试使用此下拉菜单：http://ttb.li/dump/buttons/dropdown.html

在我的网站上，这看起来很好并且功能正常，但是打开的窗口放置在不正确的高度和远到右边（在我的网站上）。在 jsfiddle 上它只是放得太高，但至少水平是正确的。

我从网站的演示版中复制并粘贴以制作此版本，我看不到任何可能遗漏的内容......我很欣赏这些观点。

更新

好的，我只是想到了什么。在我的网站上，我定义了900px的页面宽度。如果我在firefox上使用“inspect”，我可以看到JS正在为下拉列表分配215px（给或拿）左边距。这在我的屏幕上可能是准确的。但是，它正在将元素移动到我定义的900px区域的左侧，而不是在我的屏幕上......所以这可能是relative与absolute问题吗？

Answer 1

您可以删除定位下拉列表的JavaScript代码，并在CSS中定义它。如果您相对定位.dropdown，.dropdown_content将相对于其父级定位，这样可以轻松定位：

.dropdown {
    ...
    position: relative;
}
.dropdown .dropdown_content {
    ...
    top: 100%;
    left: 0;
    margin: 5px 0;
}

删除这些JavaScript行：

var o = $(this).parent().find('.dropdown_button').offset();
var h = $(this).parent().find('.dropdown_button').height();
$(this).parent().find('.dropdown_content').css({'top':(o.top+h-1),'left':o.left});

（这是您的内联top和left值的来源。）

另外，请从overflow: hidden样式定义中删除body。

工作演示： http://jsfiddle.net/gilly3/EA6LS/2/

我通常认为在jsfiddle中取消选中“Normalized CSS”是一个好主意。调试CSS时，可能会导致混乱的结果。

当你在......时可以简化JavaScript：http://jsfiddle.net/gilly3/EA6LS/4/

Answer 2

下拉列表中的内容有11px的上限，但我无法找到目前定义的位置。

在css中正确定义它似乎可以解决你的偏移问题。

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 11px;    
}

编辑：似乎在chrome中用户代理的ul，menu和dir的样式表已经

-webkit-margin-before: 1em;

这是罪魁祸首（至少对我而言）

EDIT2：他们已经内联了css（通过jQuery以错误的方式），这也是你获得偏移错误的原因

<ul class="dropdown_content" style="top: 135px; left: 164px; ">

请参阅this jsfiddle了解“正确”下拉列表。根据评论，这里是更改（请注意，在javascript中我删除了设置下拉内容顶部的部分）：

CSS

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 0px;    
}

的javascript

$(this).parent().find('.dropdown_content').css({'left':o.left});

facebook风格的下拉菜单

2 个答案: