Move element relatively

by Aakash Chakravarthy

HTML

<br/><br/><br/>
<div style="position: absolute;" id="menu">
  hello
</div>
<div class="placeholder">Hover over me to show the menu here</div>

<div class="placeholder">Hover over me to show the menu here</div>

<div class="placeholder">Hover over me to show the menu here</div>

<div class="placeholder">Hover over me to show the menu here</div>

<div class="placeholder">Hover over me to show the menu here</div>

<div class="placeholder">Hover over me to show the menu here</div>

JavaScript

// cache the menu object for optimum performance
var $menu = $("#menu"), 
    pos, width;

var showMenu = function(){
    //get the position of the placeholder element
    pos   = $(this).offset();
    width = $(this).width();
    //show the menu directly over the placeholder
    $menu.css({ "left": (pos.left + width) + "px", "top":pos.top + "px" }).show();
}
    
    
$(".placeholder").mouseover( showMenu );