JSFiddle - React, Tailwind, and code Playground

by wjbuys

HTML

<div style="position: absolute; display: none;" id="menu">
   <!-- menu stuff in here -->
</div>
<div id="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 );

    
/**
NOTES:
    
This is my original answer from http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another/158176#158176
    
I've gained a lot more experience in working with jQuery (the original answer was after playing with it for a month or so) and Javascript. Time has taught that for this example: 

* the "optimization" of caching the `$("#menu")` value is negligible here (it's only useful in a tight loop)
* functions aren't hoisted into the current scope unless they're declared as named functions, so showMenu won't be picked up by the `mouseover()` call
* for the purposes of this trivial example, using a named function is pointless anyway, it just ends up polluting the global scope
* Javascript ain't C, you might as well declare variables where you use them
**/