JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <ul class="main_menu">
        <li>
            niv1
            <ul>
                <li>
                    niv2
                    <ul>
                        <li>niv3</li>
                        <li>niv3</li>
                        <li>niv3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            niv1
            <ul>
                <li>
                    niv2
                    <ul>
                        <li>niv3</li>
                    </ul>
                </li>
                <li>
                    niv2
                    <ul>
                        <li>niv3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS

.main_menu li{position:relative;width:50px;border:1px solid #ff0055;}
.main_menu>li{float:left;display:block;background-color:#aaa;}
.main_menu li li{background-color:#777;}
.main_menu li li li{background-color:#444;}
.main_menu>li ul{display:none;}
.main_menu li:hover>ul{display:block;}
.main_menu li li:hover>ul{left:50px;position:absolute;top:0px;}