JQuery Positioning Problem

Question

I have been trying to create a menu panel with JQuery that can be seen here by clicking the Preview button on top:

http://jsbin.com/amexi/edit

Problem:

If you hover over Link Two or Link Three , the black panel comes perfectly replacing the respective blue link, however if you hover the Link One , the black panel comes little below that link. What's wrong I am doing there? How can I fix this?

Thanks.

Answer 1

You need to account for the margin automatically applied to <ul> elements.

If you look at your page with Firebug, you'll notice Firefox applies a top and bottom margin of 16px.

Answer 2

As stated above, you can apply a margin-top value of -16px to the .left class to get your intended behaviour.

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

Answer 3

Check out http://jsbin.com/amexi/5/edit

I just can't figure out why the TOP is identical on all the popups BUT the actual position of them all is different. Makes no sense. Its almost like a negative margin.

The main problem I found is that you didnt move the popup into the position of the link + offset it to the .top + .height.