JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-bar">
		<ul>
			<li id="menu-button"><a>MENU</a></li>
			<div id="menu-pages">
				<li class="active-menu"><a href="#">HOME</a>
				</li>
				<li><a href="#">PRODUCTS & SERVICES</a>
                    <ol><!--submenu-->
						<li><a href="#">PRODUCTS</a></li>
						<li><a href="#">SERVICES</a></li>
				    </ol>
                </li>
				<li><a href="#">EVENTS & ACTIVITIES</a>
                    <ol><!--submenu-->    
						<li><a href="#">events</a></li>
						<li><a href="#">activities</a></li>
					</ol>
                </li>
				<li><a href="#">ABOUT US</a></li>
				<li><a href="#">CAREERS</a></li>
				<li><a href="#">CONTACT US</a></li>
			</div>
		</ul>
	</div>

CSS

#menu-button{
	display:none;
	text-align: center;
}

.menu-bar{
	float : left;
	width : 100%;
	background-color: #00467f;
}


.menu-bar ul {
	text-align:center;
	background-color: #00467f;
    list-style-type: none;
}


.menu-bar li{
	cursor: pointer;
    display: inline;
    padding-left :3%;
    padding-right: 3%;
    position:relative;
}
.menu-bar li a{
	color : white;
	text-decoration: none;
}

.active-menu{
	background-color: #4D9C37;
	padding-top : 0.5%;
	padding-bottom:0.5%;
	border-radius : 4px; 
}

.menu-bar li ol {
    position : absolute;/********if this position is relative the menu collapses*******/
    top:15px;
    left:0px;
    border:1px solid #e7e7e7;
    display:none;
    background:#fff;
}
.menu-bar li ol a {
color : silver;
}
.menu-bar li:hover ol{
    display:block;
}