JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_nav">
    <ul class="menu">
        <li class="current-menu-item"><a href="#">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a>
                    <ul>
                        <li><a href="#">Deep Menu 1</a>
                            <ul>
                                <li><a href="#">Sub Deep 1</a></li>
                                <li><a href="#">Sub Deep 2</a></li>
                                <li><a href="#">Sub Deep 3</a></li>
                                <li><a href="#">Sub Deep 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Deep Menu 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li class="dir"><a href="#">Sub Menu 1</a></li>
                <li class="dir"><a href="#">Sub Menu 2</a>
                    <ul>
                        <li><a href="#">Category 1</a></li>
                        <li><a href="#">Category 2</a></li>
                        <li><a href="#">Category 3</a></li>
                        <li><a href="#">Category 4</a></li>
                        <li><a href="#">Category 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
            </ul>
        </li>
        <li><a...

CSS

#main_nav {
        margin-top:15px
    }            

    #main_nav ul {
        list-style:none;
        position:relative;
        float:left;
        margin:0;
        padding:0;
        background: #888;
    }

    #main_nav ul a {
        display:block;
        text-decoration:none;
        font-size:12px;
        line-height:32px;
        padding:0 15px;
        color: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    }

    #main_nav ul li {
        position:relative;
        float:left;
        margin:0;
        padding:0
    }

    #main_nav ul li.current-menu-item {
        background:#ddd
    }

    #main_nav ul li:hover {
        background: #008000
    }

    #main_nav ul ul {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        background:#888;
        padding:0
    }

    #main_nav ul ul li {
        float:none;
        width:200px;                
    }

    #main_nav ul ul a {
        line-height:120%;
        padding:10px 15px
    }

    #main_nav ul ul ul {
        top:0;
        left:100%
    }

    #main_nav ul li:hover > ul {
        display:block
    }

    .menu li > a:after { margin-left: 5px; float: right; content: '\25BA'; }
    .menu > li > a:after { margin-left: 5px; float: right; content: '\25BC'; }
    .menu li > a:only-child:after { margin-left: 0; content: ''; }