JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
	<li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Services</a>
		<ul class="subnavi">
        	<li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul>    
    </li>
    <li><a href="javascript:;">Products</a></li>
    <li><a href="javascript:;">FaQs</a></li>
    <li><a href="javascript:;">Contact</a>
    	<ul class="subnavi">
        	<li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul> 
    </li>
    <li><a href="javascript:;">Blog</a></li>
</ul>

CSS

*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{ 
	float:left; 
	border-right:1px solid #ccc;
	position:relative;
}
ul#nav li a{
	padding:0 15px;
	display:block;
	text-decoration:none;
	color:#fff;
}
#nav li a:hover{
	background:#ccc;
}
ul.subnavi{
	list-style:none;
	position: absolute;
	left: 0;
	background: #fff;
	display:none;
}
ul.subnavi li{
	display:block;
	width:120px;
	float:none;
}
ul#nav li ul.subnavi li a{
	color:#333;
}
ul#nav li ul.subnavi li a:hover {
	background:#333;
	color:#fff;
}
#nav li:hover ul{
	display:block;
}