JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<nav id="topbar">
    <ul>
        <li><a href=""><i class="fa fa-plus"></i>  New</a><ul><li>T</li><li>R</li></ul></li
            ><li><a href="">View</a></li>
    </ul>
</nav>

CSS

#topbar {
	display: block;
	background: #3B5D80;
}

#topbar > ul {
	display: block;
	color: #ECF0F1;
	line-height: 40px;
	vertical-align: middle;
	list-style: none;
	margin: 0;
	padding: 0;
}

#topbar > ul > li {
	display: inline-block;
	margin: 0;
	white-space: pre;
}

#topbar > ul > li > a {
	display: inline-block;
	color: #ECF0F1;
	text-decoration: none;
	border-right: 1px solid #304963;
	padding: 0 18px;
}

#topbar > ul > li > a:hover {
	background: #304963;
}

JavaScript

$(document).ready(function(){
	$("#topbar > ul > li:has(ul) > ul").hide().each(function(){
		var parent = $(this).parent();
		var height = parent.outerHeight();
		$(this).css({
			position: "absolute",
			top: height,
			zIndex: 1000
		});
	});
	$("#topbar > ul > li:has(ul)").on("mouseover mouseout", function(){
		$("ul", this).slideToggle(500, "easeOutBounce");
	});
});