JSFiddle - React, Tailwind, and code Playground

by ExceptionLimeCat

HTML

<ul class="menu">
    <li>
        <ul class="sub">
            <li>Test</li>
        </ul>
    </li>
</ul>

<div id="infoIcon">
    <div id="info"></div>
</div>

CSS

#infoIcon
{
    width: 20px;
    height: 20px;
    border: 1px solid black;
}

#infoIcon:hover #info
{
    display: block;
    z-index: 100;
}

#info
{
    display: none;
    width: 100px;
    height: 50px;
    background: pink;
}

ul
{
    
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu
{
    
    width: 20px;
    height: 20px;
    background: pink;
}
.menu li:hover ul.sub
{
    display:block;
    color: green;
    z-index: 100;
}
.sub
{
    display: none;   
}