JSFiddle - React, Tailwind, and code Playground
HTML
<div class="xmenu-toggle">Click me!
<div class="xmenud">Click me!</div>
<div class="xmenu">I am the menu, I have relative position</div></div>
<div id="offset"></div>
CSS
.xmenu-toggle {
display:block;
width:120px;
background-color:yellow;
padding:4px 6px 4px 6px;
}
.xmenud{
display:block;
width:120px;
background-color:red;
padding:4px 6px 4px 6px;
position: absolute;
}
.xmenu {
display:none;
background-color:green;
padding:4px 6px 4px 6px;
position: absolute;
}
JavaScript
$('.xmenu-toggle').click(function (event) {
var offset = $(this).offset();
$(this).parent().find('.xmenu').toggle().offset({
top: offset.top + 20,
left: offset.left + 10
});
});