JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menubar">
            <ul id="menu">
                <li class="current"><a href="Home.aspx">Home</a></li>
                <li><a href="MemberMaintenance.aspx">Member Maintenance</a></li>
                <li><a href="#">Manager Maintenance</a>
                    <div class="submenu">
                    <ul>
                        <li><a href="#">Register</a></li>
                    </ul>
                    </div>
                </li>
                <li><a href="LoanMaintenance.aspx">Loan Maintenance</a></li>
                <li><a href="Report.aspx">Report</a></li>                
            </ul>
        </div><!--close menubar-->

CSS

ul#menu {
padding:0px;
margin:0px;
list-style:none;
position:relative
}

ul#menu ul {
position:absolute;
left:0;
top:100%;
display:none;
padding:0px;
margin:0px
}

ul#menu li {
display:inline;
float:left;
position:relative
}

ul#menu li a {
float: left;
  font: bold 120% Arial, Helvetica, sans-serif;
  height: 24px;
  margin: 10px 0 0 20px;
  text-shadow: 0px -1px 0px #000;
  padding: 6px 20px 0 20px;
  background: transparent; 
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  text-align: center;
  color: #FFF;
  text-decoration: none}

ul#menu li.current a { 
  color: #1D1D1D;
  background: #FFF;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  text-shadow: none;}


ul#menu li a:hover {
background:#cccccc;
color:#333333
}

ul#menu li:hover ul {
display:block;
}

ul#menu ul li {
display:block;
}