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

function handler(index) {
    return function() {
        console.log(x[index], index, i);
    }
}

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) {
        y[i].addEventListener('click', handler(i));
    }
}