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;
}