JSFiddle - React, Tailwind, and code Playground

by subash1232

HTML

<ul>  
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
 </ul>

CSS

ul li{width: 100px;}

ul li a{
    background: red;
    padding: 5px;
    display: block;
    border-bottom: 1px solid black;
}

ul li ul li:first-child a{
    color: white;
}

ul li ul li{
   height: 0;
}

ul li:hover ul li{height: 100%;}