JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="hide">
        <span>Lorem Ipsum</span>
        <ul>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
    </li>
    <li class="hide">
        <span>Lorem Ipsum</span>
        <ul>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
    </li>
    <li class="hide">
        <span>Lorem Ipsum</span>
        <ul>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
            <li>lorem ipsum</li>
        </ul>
    </li>
</ul>

CSS

ul {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    width: 30%;
}

.hide {
    margin-bottom: 0.5em;
}

.hide span {
    display: inline-block;
    padding: 10px;
}


.hide ul {
    display: none;
    font-size: 0.8em;
    width: 100%;
}

JavaScript

$('.hide > span').mouseover(function() {
    if( $(this).next('ul').css('display') == 'none' ) {
        console.log(this);
        $(this).next('ul').show(500);
    }
});