JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ul1">
    <li>Блок 1</li>
    <ul class="ul2">
        <li>Блок 2</li>
    </ul>
</ul>

CSS

ul {
    border: 1px solid black;
    display: block;
    height: 100px;
    list-style: none;
    margin: 0;
    width: 100px;
}
.ul1 {
    background-color: yellow;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
}
.ul2 {
    background-color: green;
    opacity: 0;
    position: fixed;
    top: 5px;
    transition: all 1s ease-in .5s;
    visibility: hide;
}
.ul1:hover .ul2 {
    opacity: 1;
    transition: all 1s ease-in .5s;
    visibility: visible;
}