JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
<ul>
<li class="current"><a href="#"><span>DASHBOARD</span></a>
<ul>
<li><a href="#">Menu</a></li>
<li>|</li>
<li><a href="#">User</a></li>
<li>|</li>
<li><a href="#">Content</a></li>
<li>|</li>
<li><a href="#">Extension</a></li>
<li>|</li>
<li><a href="#">School</a></li>
<li>|</li>
<li><a href="#">Support</a></li>
</ul>    
</li>
<li><a href="#"><span>USER</span></a>
<ul>
<li><a href="#">Thilakar</a></li>
<li>|</li>
<li><a href="#">Hariprabu</a></li>
<li>|</li>
<li><a href="#">Anglimass</a></li>
<li>|</li>
<li><a href="#">Benny</a></li>
</ul>    
</li>
<li><a href="#"><span>CONTENT</span></a></li>
<li><a href="#"><span>EXTENSION</span></a></li>
<li><a href="#"><span>SCHOOL</span></a></li>
</ul>
</div>

CSS

.menu {width:98%; height:auto; padding:0px 0px 0px 0px; margin:46px auto 0 auto; position:relative;}
.menu ul li {list-style-type:none; float:left;}
.menu ul li a {font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#000; background:url(../images/menuLeft.png) left top no-repeat; display:block; padding-left: 10px; height:32px; line-height:35px; text-align:center;}
.menu ul li a span {background:url(../images/menuRight.png) right top no-repeat; height:32px; padding-right: 10px; display:block; cursor:pointer;}
.menu ul li a:hover{background:url(../images/menuLeftHover.png) left top no-repeat; height:33px; padding-left: 10px; color:#ccc;}
.menu ul li a:hover span{background:url(../images/menuRightHover.png) right top no-repeat; padding-right: 10px; height:33px;}
.menu ul li ul {display:none; position:absolute; left:0px; top:20px; padding:20px 0px 20px 0px; width:100%;}
.menu ul li ul li {line-height:20px;}
.menu ul li ul li a {background:none !important; font-size:12px !important; color:#000 !important; line-height:20px; padding:0px 10px 0px 10px; font-weight:normal;}
.menu ul li ul li a:hover {background:none; text-decoration:underline;}
.menu ul li:hover ul {background:none; display:block;}
.menu ul li.current a {background:url(../images/menuLeftHover.png) left top no-repeat; height:33px; padding-left: 10px; color:#ccc;}
.menu ul li.current a span{background:url(../images/menuRightHover.png) right top no-repeat; padding-right: 10px; height:33px;}
.menu ul li.current ul {left:0;}