JSFiddle - React, Tailwind, and code Playground

by rahulr

HTML

<div role="navigation" id="access">
<ul id="menu-top_nav" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17" id="menu-item-17">
        <a href="#">Our Business</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73" id="menu-item-73"><a href="#">About Us</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72" id="menu-item-72"><a href="#">Careers</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

#access {
	margin-top: 45px;
}

#access ul#menu-top_nav {
	margin:0 0 10px 15px;
}

#access ul#menu-top_nav li {
	font-size: 15px;
	position: relative;
	display: inline-block;
}

#access ul#menu-top_nav li a {
	color: #336c82;
	padding: 10px;
}

#access ul#menu-top_nav ul {
	display: none;
}

#access ul#menu-top_nav li a:hover {
	background: #336c82;
	color: #fff;
	text-decoration: none;
}

#access ul#menu-top_nav li:hover  ul {
	display: block;
	position: relative;
	top: 30px;
	left: -25px;
	background: #336c82;
}

#access ul#menu-top_nav ul.sub-menu li {
	display: block;
	width: 200px;
	padding: 10px;
}

#access ul#menu-top_nav ul.sub-menu li a {
	color: #fff;
	padding: 0;
}

#access ul#menu-top_nav ul.sub-menu li a:hover {
	padding: 0;
	text-decoration: underline;
}