JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul>
    <li>level1
        <ul>
            <li>levl2222</li>
            <li>level22</li>
        </ul>
    </li>
    <li>level1</li>
    <li>level1
        <ul>
            <li>level2222</li>
            <li>level22222229800</li>
        </ul>
    </li>
    <li>level1</li>
</ul>

CSS

/*removes white space between .main li 
better to leave it for margins*/
ul {
    font-size: 0;
}

ul li {
    font-size: 15px;
}


/**/
ul > li {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 100px;
    background-color: indianred;
}

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

li:hover ul{
    display: block;
}

/*override styles set by ul>li
*/
ul ul > li {
    display: list-item;
    position: static;
    width: auto;
    background: blue;
}