JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3
        <ul class="sub-menu">
            <li>li 1</li>
            <li>li 2</li>
        </ul>
    </li>
    <li>li 4
        <ul class="sub-menu">
            <li>li 1</li>
            <li>li 2</li>
        </ul>
    </li>
</ul>

CSS

.menu > li:hover .sub-menu {
    display: block;
}

li:hover {
    border: #ccf 1px solid;
    cursor: pointer;
}

JavaScript

var x = document.getElementsByTagName("ul");
var y = document.getElementsByTagName("li");
var i;


for (i = 0; i < x.length; i++) {
    if (x[i].className == "sub-menu") {
        x[i].style.display = "none";
    }
}

for (i = 0; i < y.length; i++) {
    if (y[i].childElementCount > 0) {
        (function(ind) {
            y[ind].onclick = function() {
                console.log(x[ind], ind, i);
            }
        })(i);
    }
}