JSFiddle - React, Tailwind, and code Playground

by Amit Sinha

HTML

<div id="menuContainer">
    <div class="menuItem first">
        <div class="settingsIcon"></div>
        <div class="text">Account Settings</div>
        <div class="downArrowIcon"></div>
    </div>
    <div id="settingsMenu">
        <div class="menuItem">Manage clients</div>
        <div class="menuItem">Manage specials</div>
        <div class="menuItem">Manage users</div>
        <div class="menuItem">Logout</div>
    </div>
</div>

CSS

#settingsMenu{
    display: none;
    width: 50%;
    background: #eee;
}

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
    display: block;
    position: relative;
    z-index: 100;
}