JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul class="menu">
    <li><a href="#">Sub x3</a>
        
        <!-- lvl class -->
        <ul class="mlvl-1">
            <li><a href="#">Sub x2</a>
                
                <!-- lvl class -->
                <ul class="mlvl-2">
                    <li><a href="#">Sub x1</a>
                        
                        <!-- lvl class -->
                        <ul class="mlvl-3">
                            <li><a href="#">Normal</a></li>
                            <li><a href="#">Normal</a></li>
                            <li><a href="#">Normal</a></li>
                        </ul>
                        
                    </li>
                </ul>
                
            </li>
            <li><a href="#">Normal</a></li>
        </ul>
        
    </li>
    <li><a href="#">Normal</a></li>
    <li><a href="#">Sub x1</a>
        
        <!-- lvl class -->
        <ul class="mlvl-1">
            <li><a href="#">Normal</a></li>
            <li><a href="#">Normal</a></li>
        </ul>
        
    </li>
</ul>

CSS

.menu,
.menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100px;
}

.menu ul {
    display: none;
    position: absolute;
    left: 110px;
}

.menu li {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
}

.menu a {
    padding: 5px;
    float: left;
    clear: both;
    width: 100%;
    border: 1px solid #e1e1e1;
    text-decoration: none;
    color: #444;
}

.menu a:hover {
    color: #333;
    border: 1px solid #999;
}

.menu li:hover .mlvl-1 {
    display: block;
}

.mlvl-1 li:hover .mlvl-2 {
    display: block;
}

.mlvl-2 li:hover .mlvl-3 {
    display: block;
}