Question

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 arrow 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?

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.