JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
		<li class="link">home
			<ul class="list">
				<li>result</li>
				<li>result</li>
				<li>result</li>
			</ul>
		</li>
		<li class="link">home
			<ul class="list">
				<li>result</li>
				<li>result</li>
				<li>result</li>
			</ul>
		</li>
		<li class="link">home
			<ul class="list">
				<li>result</li>
				<li>result</li>
				<li>result</li>
			</ul>
		</li>
		<li class="link">home
			<ul class="list">
				<li>result</li>
				<li>result</li>
				<li>result</li>
			</ul>
		</li>
</ul>

CSS

.list {
	display:  none;
	position: absolute;
}

.nav > li {
	float: left;
	margin-right: 20px;
}

JavaScript

var links = document.getElementsByClassName("link");
for (var i=0; i<links.length; i++)  {
var link = links[i];
var show = function() { this.children[0].style.display = "block"; };
var hide = function() { this.children[0].style.display = "none"; };

if(link.addEventListener) {
    link.addEventListener("mouseover", show, false);
	link.addEventListener("mouseout", hide, false);
} else if(link.attachEvent) {
	link.attachEvent("onmouseover", show);
	link.attachEvent("onmouseout", hide);
}}