JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div>
    <ul>
        <li>
            <a href="#nogo">hoveritem</a>
            <ul>
                <li>
                    <a href="#nogo">hoveritem</a>
                </li>
                <li>
                    <a href="#nogo">hoveritem</a>
                </li>
                <li>
                    <a href="#nogo">hoveritem</a>
                </li>
                <li>
                    <a href="#nogo">hoveritem</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#nogo">hoveritem</a>
        </li>
        <li>
            <a href="#nogo">hoveritem</a>
        </li>
        <li>
            <a href="#nogo">hoveritem</a>
        </li>
    </ul>
</div>

CSS

ul li {float:left; padding:10px;position:relative}
ul li>a {background:#fad400;}
ul li ul li {display:none;}
ul li:hover ul li {display:block;float:none;padding: 10px;}
ul li ul {position:absolute;}
ol, ul { -webkit-padding-start: 0px; list-style-type: none;}