JSFiddle - React, Tailwind, and code Playground

by ohcibi

HTML

<ul id="root">
    <li>
        One
        <ul>
            <li>
              Two
              <ul>
                  <li>three</li>
                  <li>subsubnext</li>
                </ul>                              
            </li>
            <li>subnext</li>
            <li>subnext</li>
        </ul>
    </li>
<li>next</li>
<li>next</li>
</ul>

CSS

#root > li {
    float: left;
}
#root li {
    background: gray;
    padding: 10px;
}
#root li:hover {
    background: lightgray;
}
#root > li ul {
    display: none;
}

#root > li:hover > ul {
    display: block;
}