JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<ul>
    <li><a href="#">Link 1</a></li>
    <li>
        <a href="#">Link 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS

ul > li { position: relative; float: left; }

ul > li > a { display: block; padding: 10px; background: #666; color: #fff; text-decoration: none; }

ul li ul { display: none; position: absolute; top: 100%; left: 0; }

ul li:hover ul { display: block; }

ul li ul li a { padding: 5px 20px; background: #999; color: #fff; text-decoration: none; width: 100px; }