JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="wrapper">

                <ul class="red list">
                                                <li>Item 1</li>
                                                <li>Item 2</li>
                                                <li>Item 3</li>
                                                <li>Item 4</li>
                                   
                                </ul>
                
</div>

<div class="wrapper">

   <ul class="blue list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
      
    </ul>
                
</div>

</body>

CSS

/* 
Note this creates the effect desired but has the problem of the scroll bars disappering when the user hovers over the UL. I am not sure of a way around this as if you add additional elements then you cant make use of the UL visible: auto

*/

/* Stop webkit stylesheet applying styles otherwise the ULs will jump around */
ul.list{
-webkit-margin-before: 0;
-webkit-margin-after: 0;

}


.list 
{
    height:50px;
    overflow: auto;
    width: 200px;
}

.list:hover
{
    z-index:1;
    overflow: visible;
    height: auto;
    position: absolute;
}

.blue
{
   background-color: blue;
}

.red
{
    background-color: red;              
}

/* maintain height of div during hover otherwise it will move :) */
.wrapper{
    height: 50px; 
}