JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<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>
</div>

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:#000;
}
ul#nav li ul.subnavi li a:hover {
    background:#000;
    color:#000;
}
#nav li:hover ul{
    display:block;
}