JSFiddle - React, Tailwind, and code Playground

HTML

<div id="access">
<div class="menu-header">
    
<ul id="menu-wordpress-sandbox-menu" class="menu">
	<li id="menu-item-17" class="menu-item">
        <a href="#">Fruits</a>
		<ul class="sub-menu">
			<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
			<li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
		</ul>
	</li>
	<li id="menu-item-32" class="menu-item">
        <a href="#">Colors</a>
		<ul class="sub-menu">
			<li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
			<li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item">
        <a href="#">Links</a>
		<ul class="sub-menu">
			<li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
			<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
		</ul>
	</li>
</ul>
    
</div>
</div>

CSS

#access {
	background: #000;
	margin: 0 auto;
	display: block;
	float: left;
    position: relative;
}
ul.menu { 
    list-style: none;
    margin: 0;
}
ul.menu > li {
    float: left;
    padding: 5px;
    background: #ccc;
}
#access ul .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    width: 200px;
	background-color: #474747;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
    display: none;
}
#access ul .sub-menu a {
	background: #333;
	line-height: 1em;
	display: block;
    padding: 3px 5px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

JavaScript

jQuery(document).ready(function($) {
    $("ul.menu > li").hover(
        function() {
            $(this).find("ul.sub-menu").stop().animate({ height: 'toggle', opacity: 'toggle' });
        }
    );
});