JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<div id="flip">
		<ul>
			<li>Home</li>
			<li><a href="#">Sub</a></li>
			<li><a href="#">Sub</a></li>
			<li><a href="#">Sub</a></li>
		</ul>
	</div>

CSS

#flip li,#flip ul {
	list-style-type: none;
    background-color: yellow;
}

JavaScript

$(document).ready(function() {
		var temp = $('#flip ul li:eq(0)').nextAll();
		temp.hide();
		$('#flip ul').mouseenter(function(event) {
			temp.slideDown("slow");
		});
		$('#flip ul').mouseleave(function() {
			temp.slideUp("slow");
		});
	});