JSFiddle - React, Tailwind, and code Playground

by midhun_k

HTML

<ul class="menu">
 
    <li><a href="#">Home</a></li>
    <li><a href="#">Likes</a></li>
    <li><a href="#">Dashboard</a>
 
        <ul>
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Sign Out</a></li>
        </ul>
 
    </li>
    <li><a href="#">Uploads</a></li>
    <li><a href="#">Videos</a></li>
 
</ul>

CSS

.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.menu {
    height: 40px;
    width: 370px;
 
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.menu a{
      color: #fff;
      font-weight:bold;
      text-decoration:none;
      margin-left:20px;
      line-height: 38px;
      -webkit-transform: color;
      
 }
 .menu li a{
       -webkit-transition: color .3s ease-in-out;
  }
 .menu li:hover > a{
       color:#8fde62;
  } 
 
 .menu ul{
      display:block;
      position:absolute;
      top: 40px;
      left: 0;
      background: #1f2024;
      -webkit-border-radius: 0px 0px 9px 9px;
  }
  
  .menu ul li{
        width:110px;
        height: 0px;
        -webkit-transition: height .3s ease-in-out;
   }
  
  .menu li:hover ul li{
        height:35px;
   }