JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

Drop down list without js

<div class='parentDropDown'>
    Drop Down
    <ul class='hiddenList'>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <li>lorem4</li>
        <li>lorem5</li>
        <li>lorem6</li>            
    </ul>
    
</div>

CSS

.hiddenList{
        display: block;
        overflow:hidden;
        max-height:0;    
        transition: max-height 0.55s ease-in-out;
    
}
.parentDropDown:hover .hiddenList{
    max-height:300px;

    
}

.hiddenList li{
    list-style-type:none;
    border-bottom:2px solid red;
    background-color:orange;
    
}