JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.youmeusdesign.co.uk/menu_test2/assets/css/base.css">
<link rel="stylesheet" href="http://www.youmeusdesign.co.uk/menu_test2/assets/css/fonts.css">
<script src="http://www.youmeusdesign.co.uk/menu_test2/assets/js/jquery.globalcontent.min.js"></script>
<div id="menu"></div>

JavaScript

$(window).load(function () {
    $("#menu ul li").unbind("click");
    $("#menu ul ul li, #menu ul ul li a ").unbind("click");
    // On hover show or hide
    $("#menu ul li").on("mouseover mouseout tap",function(event){      
        if($(this).children("ul").is(":hidden") && (event.type == "mouseover" || event.type == "tap")){
             $(this).children("ul").show();
             $(this).children("ul").css('background-image', 'none');
       }else if($(this).children("ul").not(":hidden") && (event.type == "mouseout" || event.type == "tap")){
             $(this).children("ul").hide();
       }    
    });

    // On hover show or hide
    $("#menu ul ul li, #menu ul ul li a ").on("mouseover mouseout tap",function(event){        
       if(!$.hasData($(this),"hovered") && (event.type=="mouseover" || event.type=="tap")){
             $(this).css('color', '#666');
             $.data((this),"hovered",true);
       }else if($.hasData((this),"hovered") && (event.type=="mouseout" || event.type=="tap")){
             $(this).css('color', '#FFF');
           $.removeData((this),"hovered");
       }
    });

});