JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: none;" id="menu">
   <ul>
       <li>Sub Menu item</li>
       <li>Sub Menu item</li>
       <li>Sub Menu item</li>
       <li>Sub Menu item</li>
       <li>Sub Menu item</li>
    </ul>
</div>
<div style="position: absolute; left: 40; top: 20">
    <ul>
        <li class="placeholder">Menu item</li>
        <li class="placeholder">Menu item</li>
        <li class="placeholder">Menu item</li>
        <li class="placeholder">Menu item</li>
    <ul>
<div>

CSS

.placeholder, #menu {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}

JavaScript

$(".placeholder").mouseover(function() {
    // .position() uses position relative to the offset parent, 
    // so it supports position: relative parent elements
    var pos = $(this).position();

    // .outerWidth() takes into account border and padding.
    var width = $(this).outerWidth();

    //show the menu directly over the placeholder
    $("#menu").css({
        position: "absolute",
        top: pos.top + "px",
        left: (pos.left + width) + "px"
    }).show();
});