JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

#menu {
        position:absolute; top:10px; right:0px;
        margin-right:6%;
        height:40px;
    background-color: green;
        }
    #menu ul{
        list-style-type:none;
        text-decoration:none;
        }
    #menu ul li {
        float:left;
        margin-right:15px;
        }
    #menu ul li a {
        text-decoration:none;
        font-size:18px;
        color:#fff;
    padding: 5px 15px 0px 15px;
        }
    #menu ul li a:hover {
        text-decoration:none;
        font-size:18px;
        color:#fff;
        background-color:#000;
        -webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}