JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu_top">
    <li><a href="#">item1</a> 
    </li>
    <li><a href="#">item2</a> 
    </li>
    <li><a href="#">item3</a>

        <ul>
            <li><a href="#">subitem1</a>

            </li>
            <li><a href="#">subitem2</a>

            </li>
            <li><a href="#">subitem3</a>

                <ul>
                    <li><a href="#">subsubitem1</a>

                    </li>
                    <li><a href="#">subsubitem2</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">subitem4</a>

            </li>
            <li><a href="#">subitem5</a>

            </li>
        </ul>
    </li>
    <li><a href="#">item4</a>

    </li>
    <li><a href="#">item5</a>

    </li>
</ul>

CSS

ul.menu_top {
        float:left;
        width:70%;
        margin: 8px 100px 0 0;
        border-radius:4px;
        background-color: #c4092a;
        list-style-type: none;
        z-index:+1;
    }
    ul.menu_top li {
        float: left;
        position: relative;
        margin: 4px 2em 4px 4px;
        padding: 0;
    }
    ul.menu_top li ul {
        visibility: hidden;
        position: absolute;
        top:100%;
        left:0px;
        padding:0.5em;
        list-style-type: none;
        white-space:nowrap;
        background-color: #c4092a;
        border: 1px solid white;
        border-radius:4px;
        z-index:+1;
    }
    ul.menu_top li:hover > ul {
        visibility: visible;
        z-index: +2;
    }
    ul.menu_top li ul li {
        padding: 0;
        margin: 12px 4px;
        float:none;
        border:0;
        min-width:3em;
    }
    ul.menu_top li ul li ul {
        top:0;
        left:99%;
    }
    ul.menu_top a {
        background-color:#c4092a;
        color:white;
        text-decoration:none;
        padding:4px;
        font-size:18px
    }
    ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
        background-color:white;
        color:blue;
        text-decoration:none;
    }
    ul.menu_top li a.haschildren:after {
        content:"\00A0\00A0\25BC";
    }
    a {
        color:#0000aa;
        background-color:inherit;
    }
    body, ul, li {
        margin:0;
        padding:0;
    }