JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-menu-wrapper">
	<nav role="navigation" aria-label="Main menu">
		<ul class="main-menu clearfix" role="menubar">
			<li><a href="">Main menu 1</a>
				<ul class="sub-menu clearfix">
					<li><a href="#">Sub menu 1</a></li>
					<li><a href="#">Sub menu 2</a></li>
					<li><a href="#">Sub menu 3</a></li>
					<li><a href="#">Sub menu 4</a></li>
					<li><a href="#">Sub menu 5</a></li>
					<li><a href="#">Sub menu 6</a></li>
				</ul>
			</li>
			<li><a href="">Main menu 2</a>
				<ul class="sub-menu clearfix">
					<li><a href="#">Sub menu 1</a></li>
					<li><a href="#">Sub menu 2</a></li>
					<li><a href="#">Sub menu 3</a></li>
					<li><a href="#">Sub menu 4</a></li>
					<li><a href="#">Sub menu 5</a></li>
					<li><a href="#">Sub menu 6</a></li>
				</ul>
			</li>
			<li><a href="">Main menu 3</a>
				<ul class="sub-menu clearfix">
					<li><a href="#">Sub menu 1</a></li>
					<li><a href="#">Sub menu 2</a></li>
					<li><a href="#">Sub menu 3</a></li>
					<li><a href="#">Sub menu 4</a></li>
					<li><a href="#">Sub menu 5</a></li>
					<li><a href="#">Sub menu 6</a></li>
				</ul>
			</li>
			<li><a href="">Main menu 4</a>
				<ul class="sub-menu clearfix">
					<li><a href="#">Sub menu 1</a></li>
					<li><a href="#">Sub menu 2</a></li>
					<li><a href="#">Sub menu 3</a></li>
					<li><a href="#">Sub menu 4</a></li>
					<li><a href="#">Sub menu 5</a></li>
					<li><a href="#">Sub menu 6</a></li>
				</ul>
			</li>
		</ul>
	</nav>
</div>

CSS

.main-menu {
	width: 400px;
	height: 50px;
	line-height: 50px;
	list-style: none;
	margin: 0;
	float: right;
	font: 18px 'Arial';
	position: relative;
}

.main-menu li {
	display: table-cell;
	border-right: 1px solid #0854a9;
	background: #000000;
}

.main-menu li a {
	line-height: 47px;
	border-top: 3px solid transparent;
	display: block;
	padding: 0 8px;
	color: #ffffff;
}

.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a {
	color: #023e81;
	background: #ff0000;
	border-top: 3px solid #ffc226;
	text-decoration: none;
}

.main-menu li:hover ul,
.main-menu li:focus ul {
	display: block;
}

.sub-menu {
	background: #000000;
	position: absolute;
	margin: 0;
	display: none;
	min-width: 148px;
	border-bottom: 3px solid #ffc226;
	-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}

.sub-menu li {
	display: block;
	border: none;
}

.sub-menu li a {
	line-height: normal;
	border: none;    
	display: block;
	padding: 8px;
	color: #023e81;
}

.sub-menu li a:hover,
.sub-menu li a:focus {
	line-height: auto;
	border: none;
	color: #ffffff;
	background: #023f82;
}