JSFiddle - React, Tailwind, and code Playground

by Richard Hardesty

HTML

<ul>
        <li class="dropdown"><a href="#">First Anchor</a>
            <ul class="dropdown-menu item hover">
                <li>Some test</li>
                <li>Some test</li>
                <li>Some test</li>
            </ul>
        </li>
        <li><a href="#">some text</a></li>
    </ul>

CSS

.dropdown{
    position: relative;
}
.dropdown-menu{
    display: none;
    background-color: red;
    padding: 20px;
    width: 100px;
}

li.dropdown:hover .dropdown-menu{
    display: block;
    position: absolute;
    top: 17px;
    left: 0;
    
}
.item{
 opacity: 0;
    transition: opacity .5s ease-in-out;
}

.hover:hover{
    opacity: 1;
}