JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul class="lv1">
        <li>
            <a href="#">대메뉴1</a>
            <ul class="lv2">
                ...
            </ul>
        </li>
        <li>
            <a href="#">대메뉴2</a>
            <ul class="lv2">
                <li>중메뉴1</li>
                <li>중메뉴2</li>
                <li>
                    <a href="#">중메뉴3</a>
                    <ul class="lv3">
                        <li>소메뉴1</li>
                        <li>소메뉴2</li>
                        <li>소메뉴3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="on">
            <a href="#">대메뉴3</a>
            <ul class="lv2">
                <li>중메뉴1</li>
                <li>중메뉴2</li>
                <li class="on">
                    <a href="#">중메뉴3</a>
                    <ul class="lv3">
                        <li>소메뉴1</li>
                        <li>소메뉴2</li>
                        <li>소메뉴3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#nav ul{list-style:none}
#nav .lv1 ul{display:none;}
#nav .lv1 li{float:left; margin:0 5px}
#nav .on a{font-weight:bold}
#nav .on > ul{display:block;margin:5px 0}