JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav id="nav">
        <li>Item 1
            <ul>
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
                <li>Sub-item 3</li>
                <li>Sub-item 4</li>
            </ul>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
    </nav>
</body>

CSS

#nav{ margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px; }
#nav > li{ list-style-type:none; float:left; display:block; margin:0px 10px;  position:relative; padding:10px; width:100px; }
#nav > li ul{ position:absolute; bottom: 100%; }
#nav li:hover > ul {
    display:block;
}
#nav > li:hover{
-moz-border-radius:10px;
-webkit-border-radius:10px; }
#nav li ul{ margin:0px; padding:0px; display:none; }
#nav li ul li{ list-style-type:none; margin:10px 0 0 0; }
#nav li ul li a{ display:block; padding:5px 10px; color:#bdb49f; text-decoration:none; }
#nav li ul li:hover a{ color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px; }
#nav li span{ cursor:pointer; margin:0px 10px; font-weight:bold; }

#nav {
    margin-top: 100px;
}