JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li>Item</li>
    <li>Item
        <ul>
            <li>Sub</li>
            <li>Sub
                <ul>
                    <li>SubSub</li>
                    <li>SubSub</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

body {font: 1em sans-serif;}
ul {padding: 0;margin: 0;}

#menu li {
    position: relative;
    padding: 10px 25px;
}

#menu>li {
    display: inline-block;
    vertical-align: top;
    background: #dadada;
    cursor: pointer;
}

#menu>li:hover {
    background: #999;
}

#menu>li:hover>ul {
    top: 100%;
}

#menu ul {
    list-style: none;
    position: absolute;
    width: 100%;
    background: #dadada;
}

#menu>li>ul {
    top: -9999px;
    left: 0;
}

#menu li li {
    text-align: center;
    padding: 10px 0;
}

#menu li li:hover {
    background: #333;
    color: #fff;
}

#menu ul ul {
    top: -9999px;
    left: 100%;
}

#menu li li li {
    color: #000;
}

#menu li li:hover ul {
    top: 0;
}