JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
	<ul id="menu">
		<li><a href="">Menu 1</a></li><!--
	 --><li>
			<a href="">Menu 2</a>
			<ul>
				<li><a href="">Sous Menu 1</a></li>
				<li><a href="">Sous Menu 2</a></li>
				<li><a href="">Sous Menu 3</a></li>
				<li><a href="">Sous Menu 4</a></li>
				<li><a href="">Sous Menu 5</a></li>
			</ul>
		</li><!--
	 --><li><a href="">Menu 3</a></li><!--
	 --><li><a href="">Menu 4</a></li><!--
	 --><li><a href="">Menu 5</a></li>
	</ul>
</nav>

CSS

html, body, ul {margin:0;padding:0;}
#menu {min-width: 900px;text-align:center;}
#menu>li {position:relative;display:inline-block;vertical-align:top;}
#menu>li+li {border-left:1px solid #fff;}
#menu a {display:block;padding:13px 60px;text-decoration:none;font:1em sans-serif;color:#fff;background:#333;transition:all .3s ease;}
#menu li:hover>a {background:#09f;}
#menu ul {white-space:nowrap;position:absolute;top:-9999px;list-style:none;}
#menu li:hover ul {top:100%;}