JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
<div class="nav">

<ul>
<li><a href="#">MEN'S WEAR</a>
  <ul>
    <li class="yo">TOPS
      <ul>

        <li><a href="#">Jackets & Coats</a></li>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Overshirts</a></li>
        <li><a href="#">T-Shirts</a></li>
        <li><a href="#">Basic T-Shirts</a></li>
        <li><a href="#">Knitwear</a></li>
        <li><a href="#">Sweats</a></li>   
      </ul>
    </li >
    <li class="yo">BOTTOMS
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Colour Jeans</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Shorts</a></li> 
      </ul>
    </li>
    <li class="yo">FOOTWEAR
      <ul>
        <li><a href="#">Boots</a></li>
        <li><a href="#">Sandals</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Sneakers</a></li> 
      </ul>
    </li>
    <li class="yo">ACCESSORIES
      <ul>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Hats</a></li>
        <li><a href="#">Scarves</a></li>
        <li><a href="#">Gloves</a></li>
        <li><a href="#">Sunglasses</a></li>
        <li><a href="#">Watches</a></li>
        <li><a href="#">Jewelry</a></li>
      </ul>
    </li>
    <li class="yo">SALE
      <ul>
        <li><a href="#">Jeans</a></li>
        <li><a href="#">Caps</a></li>
        <li><a href="#">Belts</a></li>
        <li><a href="#">Sweats</a></li>
        <li><a href="#">Jewelry</a></li>
        <li><a href="#">Shirts</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>
</div> 
</body>

CSS

.nav {
 position: relative;
 background-color: #ddd;
 width: 1024px;
 height: 42px;
 margin: 0 auto;
-webkit-font-smoothing:antialiased;

}

.yo{
background-color:grey;
}

.nav a {

font: bold 16px/20px sans-serif;
padding: 11px 20px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;
}

.nav ul {

list-style: none;
left: 10px;
}

.nav ul li {
position: relative;
top: 1px;
right: 70px;
}



.nav li {

float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 15%;

}

.nav li ul {

visibility: hidden;
z-index: 1px;
opacity: 0;
-webkit-transition: all .25s ease;
   -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
        transition: all .25s ease;  



}

.nav li a:hover {
background: #000;
color: #fff;
}

.nav li li li a:hover {
background: transparent;
color: #cd2323;
text-decoration: underline;


position: relative;
padding-left: 20px;
padding-right: 20px;
}

.nav li:hover ul {
visibility: visible;
opacity: 1;


}

.nav li li {
position: relative;
top: 30px;
margin-left: 15px;
right: 10px;
padding: 2px;
font-weight: bold;
color: 8e8e8e;
}



.nav li a {

top: 10px;
left: 30px;
position: relative;
text-decoration: none;
color: #000;
font-weight: bold;
}

.nav li li ul {
position: relative;
bottom: 10px;

}
.nav li li ul li {
right: 115px;
top: 0px;

float: none;
position: relative;

}

.nav li li ul li a {

text-decoration: none;
color: #595959;
font-size: 13px;
font-weight: normal;

}

.nav li li li ul li {
padding-right: 10px;
}