JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav"><a href="index.html" title="Chop Di Waka Logo" target="_blank">
</a><ul><a href="index.html" title="Chop Di Waka Logo" target="_blank">
</a><li><a href="index.html" title="Chop Di Waka Logo" target="_blank"></a><a href="index.html">Home</a></li>|
<li class="sub"><a href="accessories.html">Accessories</a>|
<ul>
<a href="hats.html"></a><li><a href="hats.html">Hats</a></li>
<a href="bracelets.html"></a><li><a href="bracelets.html">Bracelets</a></li>
</ul>
</li>
<li><a href="clothing.html">Clothing</a>|
<ul>
<a href="men.html"></a><li><a href="men.html">Men</a></li>
<a href="women.html"></a><li><a href="women.html">Women</a></li>
</ul>
</li>
</ul>
</div>

CSS

#nav {
    margin: auto;
    z-index: 10;
    display: inline;
    text-transform: uppercase;
    text-align: center;
}

#nav ul {
    width:570;
    margin:0px auto 2px auto;
    text-align:center;
}

#nav ul li{
    display: inline;
    position:relative;
    z-index:99;
}  

#nav li:hover { position: relative }
#nav li:hover > a { 
  color: #845343; 
  text-decoration:underline;
}

#nav li.sub:hover > a {
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;        
}

#nav li a {
  color: black;
  font-weight: bold;
  text-decoration: none;
  padding: 15px;
  display: inline;
}


#nav li ul { 
  background: #fff;
  margin-top: 5px;
  display: none;   
}

#nav li:hover ul {
  display:block; 
  position:absolute; 
    left: 0;
}

#nav li ul {
  background: white;
  padding: 2px;      
}

#nav li ul li a, #nav li ul li a:hover {
  background: transparent;
  color: #000;
  width: 250px;
  font-size: 0.95em;
  font-weight: normal;
}

#nav li ul li a:hover { 
  color: #845343; 
  text-decoration: underline; 
}