JSFiddle - React, Tailwind, and code Playground

by Ag666

HTML

<ul class="menu">
    <li><a href="#">Item 1</a>
        <ul>
            <li><a href="#">Sub Item 1.1</a></li>
            <li><a href="#">Sub Item 1.2</a></li>
            <li><a href="#">Sub Item 1.3</a></li>
            <li><a href="#">Sub Item 1.4</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">Sub Item 2.1</a></li>
            <li><a href="#">Sub Item 2.2</a></li>
            <li><a href="#">Sub Item 2.3</a></li>
            <li><a href="#">Sub Item 2.4</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Sub Item 3.1</a></li>
            <li><a href="#">Sub Item 3.2</a></li>
            <li><a href="#">Sub Item 3.3</a></li>
            <li><a href="#">Sub Item 3.4</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

CSS

.menu,.menu ul{margin:0;padding:0;list-style:none;}
.menu>li{display:block;float:left;background:#f30;}
.menu li>ul{display:none;position:absolute;background:#fe0;}
.menu li:hover>ul,.menu ul:hover{display:block;}
.menu a{display:block;font:13px/33px arial,verdana,tahoma;color:#333;text-decoration:none;padding:0 15px;}
.menu li:hover>a{background:#999;}