JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="root-tags">
    <li>
        Parent 1
        <ul class="submenu">
            <li>Sub category 1.1</li>
            <li>Sub category 1.2</li>
            <li>Sub category 1.3</li>
        </ul>
    </li>
    <li>Parent 2</li>
    <li>
        Parent 3
        <ul class="submenu">
            <li>Sub category 3.1</li>
            <li>Sub category 3.2</li>
        </ul>
    </li>
</ul>

CSS

.submenu { 
    display: none;
    margin-left:10px;
    background-color:#fdd;
}

JavaScript

$('ul.root-tags').mouseleave(function() {
    $(this).find('ul').slideUp('slow');
});

$("ul.root-tags li").hover(function() {
    $(this).find('ul').slideDown('slow');
})