JSFiddle - React, Tailwind, and code Playground

by Roobyx

HTML

<div class="page">

<ul>
    <li class="navlink">
        <a href="">MENU ITEM:</a>
        <ul class="dropmenu">
            <li><a href="">Link One</a></li>
            <li><a href="">Link Two</a></li>
            <li><a href="">Link Three</a></li>
        </ul>   
    </li>    
</ul>
    
    
</div>

CSS

.page {
width:200px;
height:100px;
position:fixed;
top:50%;
bottom:50%;
}    


.dropmenu {
    display:none;
    border:1px solid #CCC;
    background-color:#eee;
    width:150px;
    padding:5px;
    position:absolute;
    top:-70px;
}

.navlink {
    background-color:#000;
    padding:5px;
}
.navlink > a {color:#FFF;}

.navlink:hover > .dropmenu {display:block;}