JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub multi">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>

CSS

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
    
    white-space: nowrap;
}
.sub>li {
    width: 100px;   
}
.multi.sub>li { 
    display: inline-block;
}
#nav>li:hover .sub {
    display: block;
}