JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Rene Kriest">
<title>Fly-out mega menu</title>
<style>
    @charset "utf-8";
/* CSS Document */
* {
    margin:0;
    padding:0;
}
ul {
    //
}
ul ul {
    display:none;
    position:absolute;
    top:20px;
}
ul ul ul {
    left:100px;
    top:0px;
}
li {
    float:left;
    list-style-type:none;
    position:relative;
    width:100px;
    background-color:#CCC;
}
li li {
    float:none;
    background-color:#FF0;
}
li li li {
    background-color:#CCF;
}
li:hover ul {
    display:block;
}
li:hover ul ul {
    display:none;
}
li li:hover ul {
    display:block;
}
</style>
</head>
<body>
<h1>Fly out mega menu</h1>
<div id="flyOut">
<ul>
    <li>Entry 1
        <ul>
            <li>Entry 2</li>
        </ul>
    </li>
    <li>Entry 1</li>
    <li>Entry 1</li>
    <li>Entry 1
        <ul>
            <li>Entry 2</li>
        </ul>
    </li>
</ul>
</div>
<script>
    function menu(obj){
    if (!obj.length) return;
    $(obj).find("ul").css('display', 'none');
    $(obj).hover(function(){
        $(this).find('ul').first().stop(true, true).slideDown(500, 'linear');
    },function(){
        $(this).find('ul').first().stop(true, true).slideUp(500, 'linear');
    });
}
 $(document).ready(function(){    
    menu($("ul li"));
});
</script>
</body>
</html>