JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<button id="nav" class="selected arrow">Communicationsâ–Ľ
    <ul class="myClassUl">
        <li id="emailButton" class="pointerCursor">Email</li>
        <li id="letterButton" class="pointerCursor">Letter</li>
    </ul>
</button>

CSS

#nav {
            margin: 0;
            text-align: left;
            color: #333;
        }
        #nav ul {
            padding-right: 3.5px;
            list-style-type: none;
            text-align: left;
            display: none;
            visibility: hidden;
        }
        #nav ul li{
            margin-left: 0;
            padding-left: 0;
            color: black;
            line-height: 21px;
            position: relative;
        }
        #nav:hover .myClassUl{
            visibility: visible;
            display: block;
        }
        .myClassUl {
            min-width: 50px;
            background: #f2f2f2;
            display: none;
            position: static;
            z-index: 999;
            left: 0;
        }

 .myClassUl #emailButton:hover
{
     background: red;
}
.myClassUl #letterButton:hover
{
     background: red;
}