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

/**
* hoverIntent is similar to jQuery's built-in "hover" function except that
* instead of firing the onMouseOver event immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the onMouseOver event.
* 
* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
* 
* hoverIntent is currently available for use in all personal or commercial 
* projects under both MIT and GPL licenses. This means that you can choose 
* the license that best suits your project, and use it accordingly.
* 
* // basic usage (just like .hover) receives onMouseOver and onMouseOut functions
* $("ul li").hoverIntent( showNav , hideNav );
* 
* // advanced usage receives configuration object only
* $("ul li").hoverIntent({
*    sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
*    interval: 100,   // number = milliseconds of polling interval
*    over: showNav,  // function = onMouseOver callback (required)
*    timeout: 0,   // number = milliseconds delay before onMouseOut function call
*    out: hideNav    // function = onMouseOut callback (required)
* });
* 
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne brian(at)cherne(dot)net
*/
(function($) {
    $.fn.hoverIntent = function(f,g) {
        // default configuration options
        var cfg = {
            sensitivity: 7,
            interval: 100,
            timeout: 0
        };
        // override configuration options with user supplied object
        cfg = $.extend(cfg, g ? { over: f, out: g } : f );

        // instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

        // A private...