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 link = document.getElementsByClassName("link");
var list = link.firstChild;

var show = function() { list.style.display = "block"; };
var hide = function() { list.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);
}