JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
 <li id="menu-item-5" class="has-flyout active">
 <a href="page link here">Home</a>
  <ul class="flyout" style="">
   <li id="menu-item-50"><a href="page link here">sub menu four</a></li>
   <li id="menu-item-51"><a href="page link here">sub menu three</a></li>
   <li id="menu-item-52"><a href="page link here">sub menu two</a></li>
   <li id="menu-item-53"><a href="page link here">sub menu one</a></li>
  </ul>
 </li>
</ul>

CSS

ul#menu-main-nav li > a:hover + ul.flyout{
    display:block;
}

ul.flyout{
    display:none;
    position:absolute;
    top:35px;
    list-style:none;
    padding:7px 3px;
    background-color:#ccc;
}

JavaScript

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});