JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<ul class="nav">
  <li><a href="#">MEMU1</a></li>
    <li><a href="#">MENU2</a>
      <ul class="#">
          <li><a href="#">MENU2a</a>
            <ul class="#">
              <li><a href="#">MENU2b</a></li>
              <li><a href="#">MENU2c</a></li>
              <li><a href="#">MENU2d</a></li>
                <li><a href="#">MENU2e</a></li>
              <li><a href="#">MENU2f</a></li>
            </ul>
            </li>
      </ul>
    </li>
    <li><a href="#">MENU3</a></li>
</ul>

CSS

* { margin:0; padding:0; }
.nav{
  display:block;
  list-style:none;
  text-align: left;
    position: relative;
    height: 30px;
}
.nav li { 
  display: block;
  position: relative;
  float: left;  
  border: 1.5px solid #FFF;
}
.nav li a { 
  width: 125px;
  height: 30px;
  display: table-cell;
    vertical-align: middle;
  text-decoration: none;
  font-size: 12px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  text-align: center;
  color: #000;
  z-index: 2000;    
  background-color: #999;
}
li.active {
  background-color: #999 ;
  color: #000;
}
.nav li a:hover {
    top: 30px;  
}

.nav li:hover > a {
  color:#fff;
  background-color:#333;  
}

.nav li ul { 
  width: 125px;
  height: 25px;
  position: absolute;
  left: -9999px;  
  border: 1.5px solid #FFF;
}
.nav li:hover ul {
  left: -2px;
}

.nav li li:hover > a {
  color:#000;
  background-color:#999;  
}

.nav li li{ 
  position: relative;
  border: 1.5px solid #FFF;
  height: 25px;

}
.nav li li a {
  height: 25px;
  top: 25px;
  text-decoration: none;
  font-size: 9px;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  text-align: center;
  display: table-cell;
    vertical-align: middle;
  color: #000;
  z-index: 2000;    
  background-color: #999;
}
li li.active {
  background-color: #a9d9d9 ;
  color: #007f7b;
}

.nav li li:hover ul {
  left: -2px;
    top: 25px; 
}

ul.nav li > ul {
  width: 700px;
  height: 25px;
  background-color:red;
}

ul.nav li > ul > li > ul {
  background-color:green;
  height: 25px; 
}

ul.nav li > ul > li { display: none; }
ul.nav li:hover li { display: block; }