JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selectable">Hover Me
    <ul class="menu">
        <li> <a href="#">Some text here</a>

        </li>
        <li> <a href="#">And some text here</a>

        </li>
    </ul>
</div>

CSS

.selectable {
    background-color: #4a525a;
    padding: 8px 14px;
    min-width: 200px;
    position: relative;
}
.selectable:hover .menu {
    visibility: visible;
    opacity: 1;
}
.menu {
    visibility: hidden;
    opacity: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 97%;
    left: 0;
    right: 0;
    transition: .2s; /* --------- REMOVE THIS --------- */
}
.menu a {
    display: block;
    background-color: #4a525a;
    color: #fff;
    padding: 12px 14px;
    text-decoration: none;
}
.menu a:hover {
    background-color: #5A636C;
}