JSFiddle - React, Tailwind, and code Playground

by MrTest

HTML

<div id="menu-overlay">
    <br /><br />
    <div class="secondary_nav wp">
        <ul class="ovrl">
            <li class="first"><a href="#">Link1</a> </li>
            <li class="mega"><a  href="#">Link2</a>
                <div class="submenu"> <br />
                    <br />
                    <br />
                    CONTENT <br />
                    <br />
                    <br />
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="overlay-bkg"> </div>

CSS

@charset "utf-8";
* { margin: 0px; padding: 0px; list-style: none;}


/*! Top
---------------------------------------------*/
#menu-overlay { width: 954px; margin: 0 auto; background-color: #fff; padding: 0 20px; position: relative; z-index: 111;}
#overlay-bkg {  background: url(../images/overlay-bkg.png); display: none; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; z-index: 110;}
* html #overlay-bkg { height: 1200px }


/*! Nav2 - green bar
---------------------------------------------*/
.secondary_nav, .third_nav { width: 954px; background-color: #069; height: 30px; position:relative; z-index: 111; }
.third_nav { margin: 0 auto; border-top: 1px solid #fff; z-index: 109;}
.secondary_nav ul, .third_nav ul { width: 954px;}
.secondary_nav.ps ul { width: 764px; float: left;}
.secondary_nav ul li, .third_nav ul li {  display: inline; margin: 0; padding: 0;}
.secondary_nav a, .third_nav a{ cursor: pointer; height: 25px; padding: 5px 35px 0px; display: block; float: left; border-right: 1px solid #fff; text-align: center; color: #fff; margin: 0px; }
.secondary_nav .mega a:hover { cursor: default;}
.secondary_nav ul li.last a, .third_nav ul li.last a { border-right: none;}


.secondary_nav ul li.current a, .third_nav ul li.current a{ background-color: #C3271F; color: #fff;}
.secondary_nav ul li.hovering a, .third_nav ul li.hovering a{ background-color: #C3271F; color: #fff;}
.secondary_nav a:hover, .third_nav a:hover { background-color: #C3271F; color: #fff;}
.secondary_nav a.lonelylink, .third_nav a.lonelylink{  border: none; float: left;}

/* REPORT SELECTION */
.secondary_nav ul li .submenu { display: none;}
.secondary_nav ul li.hovering {  margin-top: 0px;}
.secondary_nav ul li.hovering .submenu { display: block; }
.secondary_nav ul li .submenu { position: absolute; margin: 0; top: 30px; width: 974px; background-color: #fff; height: 350px; font-weight: normal; color: #607939; z-index: 10; padding: 0; overflow: hidden; left:-20px;...

JavaScript

$(document).ready(function() {

    jQuery(function($) {


        $('li.mega').mouseover(function() {
            $(this).data('mousedOver', true);
        }).mouseout(function() {
            $(this).data('mousedOver', false);
        });

        function addMega() {
            $($(this).find("div.submenu")).slideDown(1500);
            $($(this).find("div.submenu")).fadeIn("slow");
            $(this).addClass("hovering");
        }

        function removeMega() {
            $($(this).find("div.submenu")).slideUp(500);
            $($(this).find("div.submenu")).fadeOut("slow");
            $(this).removeClass("hovering");
        }

        function addOverlay() {

            if ($('li.mega').data('mousedOver')) {

                $("#overlay-bkg").fadeIn("slow");
                $("#overlay-bkg").css({
                    "display": "block",
                    "overflow": "visible"
                });

            } else {

                return false;

            }


        }

        function removeOverlay() {
            $("#overlay-bkg").fadeOut("slow");

        }


        var megaConfig = {
            interval: 300,
            sensitivity: 4,
            over: addMega,
            timeout: 200,
            out: removeMega
        };

        var OverlayConfig = {
            over: addOverlay,
            out: removeOverlay
        };

        $("li.mega").hoverIntent(megaConfig);
        $("ul.ovrl").hoverIntent(OverlayConfig);

    });

});