JSFiddle - React, Tailwind, and code Playground

by sandeep

HTML

<h2>overflow auto</h2>
<div id="container1">
    <div id="button">
        This is a button
          <ul id="hidden">
              <li>opt1</li>
              <li>opt2</li>      
          </ul>
        <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;
}

#hidden {
     display: none;
    position: absolute;
    margin-top:-20px;
    left:190px;
    width: 50px;
    border: 1px solid #333;
}

JavaScript

$('#button').live("mouseover", function() {
    $(this).find('ul').show();
});

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