JSFiddle - React, Tailwind, and code Playground

by ashu_mdu

HTML

<div id="wrapper">
    <div id="navMenu">
        <ul>
            <li><a href="#"><img src="img/i-2.png" alt="Icon"></a>

                <ul>
                    <li><a href="https://www.google.com" target="_blank">Google</a>

                    </li>
                    <li><a href="https://www.microsoft.com" target="_blank">Microsoft</a>

                    </li>
                    
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px
}
#navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;

}

#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:30px;
}
#navMenu ul li:hover ul {
    visibility:visible;
}