JSFiddle - React, Tailwind, and code Playground

HTML

<h2>overflow auto</h2>
<ul id="hidden">
    <li>opt1</li>
    <li>opt2</li>      
</ul>
<div id="container1">
    <div id="button">
        This is a button
          
        <p>Another button</p>
        <p>Another button</p>
        <p>Another button</p>
        <p>Another button</p>
        <p>Another button</p>
        <p>Another button</p>
        <p>Another button</p>
    </div>
</div>

CSS

#container1 {
    width: 200px;
    height:100px;
    overflow:auto;
    border: 1px solid #333;
}

#container2 {
    width: 200px;
    height:100px;
    border: 1px solid #333;
}

#button {
    border: 1px solid #999;
    margin: 5px;
    position: relative;
}

#hidden {
    display: none;
    position: absolute;
    width: 50px;
    border: 1px solid #333;
}

JavaScript

$('#button').live("mouseover", function() {
    var offset = $(this).offset();
    $("#hidden").css({top: offset.top,left: offset.left+170}).show();
});

$('#button').live("mouseout", function() {
    $("#hidden").hide();
});