JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main">
    <li><a href="">123abc</a></li>
    <li class="sub_on"><a href="">123abc</a>
    <ul class="sub">
        <li><a href="">sub</a></li>
        <li><a href="">sub</a></li>
    </ul>
    </li>
    <li><a href="">123abc</a></li>
</ul>

CSS

.sub{
    display:none;
    position:absolute;
    top:15px;
    left:-30px;
}
.sub_on:hover .sub{
    display:block;
}

.main li{
    display:inline-block;
    position:relative;
}
.sub li{
    display:block;
}