JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="first">
    <li>Item</li>
    <li>
        Item
        <ul class="second">
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
        </ul>
    </li>
    <li>
        Item
        <ul class="second">
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
            <li>Subitem</li>
        </ul>
    </li>
    <li>Item</li>
</ul>

CSS

.first{
    position: relative;
    top: 50px;
}
.first > li{
    display: block;
    float: left;
    width: 50px;
}
.second {
    display: none;
    border: 1px solid red;
    position: relative;
    top: 10px;
}
.second li{
    display: block
}

JavaScript

$(document).ready(function(){
    
    $("ul.first li").mouseenter(function(){
        $(this).find("ul:first").stop(true,true).slideDown();
    });
    $("ul.first li").mouseleave(function(){
        $(this).find("ul:first").stop(true,true).slideUp();
    });
    
});