JQuery定位问题

Question

我一直在尝试创建一个带有JQuery的菜单面板，可以通过单击顶部的预览按钮在此处看到：

http://jsbin.com/amexi/edit

问题：

如果您将鼠标悬停在 Link Two 或 Link Three 上，黑色面板将完全取代相应的蓝色链接，但是如果您将鼠标悬停在 Link One ，黑色面板低于该链接。我在那里做错了什么？我该如何解决这个问题？

感谢。

Answer 1

您需要考虑自动应用于<ul>元素的保证金。

如果您使用Firebug查看您的页面，您会注意到Firefox应用16px的上下边距。

Answer 2

如上所述，您可以将-16px的margin-top值应用于.left类以获得预期的行为。

http://jsbin.com/amexi/3/edit

Answer 3

查看http://jsbin.com/amexi/5/edit

我无法弄清楚为什么TOP在所有弹出窗口中是相同的但是它们的实际位置都不同。没有意义。它几乎就像一个负边缘。

我发现的主要问题是你没有将弹出窗口移动到链接的位置+将其偏移到.top + .height。