JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li> <a href="#" >first Level menu</a>
        <ul>
            <li><a href="#" >second Level menu</a></li>

            <li><a href="#" >second Level menu</a>
                <ul>
                    <li><a href="#" >third Level menu</a>
                        <ul>
                            <li><a href="#">Four level menu</a>
                                <ul>
                                    <li><a href="#">Fifth level menu</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>

            </li>
        </ul>
    </li>
    <li><a href="#" >first Level menu</a></li>
</ul>

CSS

#nav{
    background-color: #1da8d8;
    width: 100%;
    max-width: 960px;
    margin: 0;
    padding: 0;
    float: left;
}

#nav ul {
    padding: 0;
    margin:0;
    list-style: none;
    width:12em;
    z-index:99;
    position:relative;
    overflow:visible;
}

#nav li {
    background-color: #1b9cc9;
    position: relative;
    line-height: 39px;
    height: 40px;
    width: auto;
    margin: 0 5px 0 0;
    float:left;
    display:block;
}
#nav ul li{
    background-color:#1b9cc9;
    top: 20px;
    width: 12em;
    float: left;
}

#nav a {
    color: #ffffff;
    text-decoration:none;
    display:block;
    padding: 0.1em;
    margin: 0 0.2em 0 0;
    height:1.05em;
    width: auto;
}

#nav a:hover, #nav li:hover{
    background-color: #1da8d8;
}
#nav ul li:hover, #nav ul li a:hover{ background-color:#1da8d8;}


#nav ul{
    display:none;
}

/*all see this */
#nav ul ul, #nav ul ul ul{
    display:none;
    position:absolute;
    margin-left:12em;
}

/* non-IE browsers see this */
#nav ul li>ul, #nav ul ul li>ul{
    margin-top:-1.8em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
    display:none;
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
    display:block;
}

li>ul {
    top: auto;
    left: auto;
}

JavaScript

activateMenu = function(nav) {

/* currentStyle restricts the Javascript to IE only */
	if (document.all &&
 document.getElementById(nav).currentStyle) {  
        var navroot = document.getElementById(nav);
        
        /* Get all the list items within the menu */

        var lis=navroot.getElementsByTagName("LI");  
        for (i=0; i<lis.length; i++) {
        
           /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"){
            
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {	
                
                   /* display the inner menu */
                   this.lastChild.style.display="block";
                }
                lis[i].onmouseout=function() {   
                   this.lastChild.style.display="none";
                }
            }
        }
    }
}