JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#">Test link</a> 
        <ul>
            <li><a href="#">Test link 2</a></li>
            <li><a href="#">Test link 2</a></li>
        </ul>            
    </li>
    <li><a href="#">Test link</a></li>
    <li><a href="#">Test link</a></li>
    <li><a href="#">Test link</a></li>
    <li><a href="#">Test link</a></li>
</ul>

CSS

ul#nav { list-style: none; }
ul#nav > li { float: left; }
ul#nav li a { display: block; padding: 5px 8px; background: #f0f0f0; color: #222; }
ul#nav li a:hover { background: #ddd; }

ul#nav li ul { display: none; position: absolute; z-index: 100; width: 150px; }
ul#nav li:hover ul { display: block; }