JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a>
        <ul>
            <li><a href="#">item 2.1</a></li>
            <li><a href="#">item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">item 3</a>
        <ul>
            <li><a href="#">item 3.1</a></li>
            <li><a href="#">item 3.2</a></li>
            <li><a href="#">item 3.3</a></li>
        </ul>
    </li>
</ul>

CSS

li ul {
    display: none;
}

JavaScript

$(document).ready(function() {
    $("li:has(ul) a").on('hover', function(e) {
        e.preventDefault();
        var ul = $(this).parent().find('ul');
        
        if( ul.hasClass('expand') ) {
            ul.removeClass('expand').slideToggle()
        }
        else {
            $('.expand').removeClass('expand').slideToggle();
            ul.addClass('expand').slideToggle();
        }
    });
});