JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">


<div href="#">Home</div>
	<div href="#">Test</div>
	<div href="#" class="dropdown">News
		<div class="dropdown-content">
			<a href="http://www.cnn.com">cnn</a>
			<a href="http://www.bbc.com">bbc</a>
		
		</div>
    </div>
	<div href="#">About</div>
 </div>

CSS

<style>
	body{
		margin: 0px;}

.nav
{
  width:100%;
  
}
	 div {
		display: inline-block;
		/*width:25%;*/
		padding: 14px 0px;
		margin: 0px;
		background-color: rgb(0,0,255);
		color: white;
		text-align: center;
		float: left;
		font-size: 1.5em;
		text-decoration: none;}
.dropdown
{
  position:relative;
  
}
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: rgb(0,0,255);
		color: white;
		min-height: 50px;
		/*width: 25%;*/
    top:53px;
    left:0px;}

	.dropdown-content a {
		display: block;
		color:white;
		text-decoration: none;
		padding: 20px 0px;
		text-align: center;}

	div.dropdown:hover .dropdown-content{
		display: block;}

	body > div:hover, .dropdown-content div:hover{
		background-color: rgb(0,0,128);}
</style>