JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li><a href="#">Lorem ipsum</a>
        <ul class="menu2">
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
        </ul>
    </li>
    <li><a href="#">Lorem ipsum</a>
        <ul class="menu2">
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
            <li><a href="#">Lorem ipsum</a></li>
        </ul>
    </li>
</ul>

CSS

.menu  li{
    list-style: none;
    border: 1px solid red;
    padding: 25px 10px;
    display: block;
    width: 100px;
    position: relative;
}
.menu li:hover ul {
    display: block
}
.menu2 {
    position: absolute;
    top: 0;
    left: 120px;
    display: none;
}
.menu2 li {
    list-style: none;
    display: block
    width: 100px;
    padding: 5px 10px;
}