jQuery positioning bug in one link

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

$(function(){
  // hide all panels first
  $('div[id*="panel"]').hide();
  
  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');
  
  // show the panel based on rel attribute of the current hovered link
  $('#menu a').hover(function(){
    var link_rel = $(this).attr('rel');

    //get the position of the hovered element
    var pos = $(this).offset();
    
    // set z-index of previous panels low
    $('div[id*="panel"]').css('z-index', '0');
    
    // get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': pos.top + 'px',
      'zIndex': '5000'
    });
    
    // finaly show the relevant hidden panel
    $('div#' + link_rel).fadeIn('slow');

    // hide it back when mouse ar开发者_运维知识库row moves away
    $('div#' + link_rel).hover(function(){}, function(){
      $(this).fadeOut('slow');
    });

  }, function(){});
  
});

http://jsbin.com/amexi/edit

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 here? How can I fix this?

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.

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

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.