JSFiddle - React, Tailwind, and code Playground

by jsanta

HTML

<ul class="menu">
<li><a href="#">File</a>
    <ul>
        <li><a href="#">New</a></li>
        <li><a href="#">Save</a></li>
        <li><a href="#">Exit</a></li>
    </ul>
</li>
<li><a href="#">Edit</a>
        <ul>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
    </ul>
</li>
<li><a href="#">Help</a>
        <ul>
        <li><a href="#">Documentation</a></li>        
        <li><a href="#">About</a></li>
    </ul>
</li>
</ul>

CSS

ul.menu {
    margin-top: 0.5em;
}
ul.menu > li{    
    list-style: none;
    display: block;
    float: left;    
}

a {
    text-decoration: none;
    font-weight: bold;
    color: #ccc;
    padding: 0.2em 0.5em;
}

a:hover {
    background-color: #000;
    color: #fff;        
}

ul.menu ul{
    display: none;
}

ul.menu li:hover > ul {
    display: block;
}