JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div id="nav">
            <ul id="topnav">
                <li>
                    <a href="#" class="cat3">Men</a>
                    <div class="flyer flyer3"></div>
                    <div class="sub">
                        <div class="hover-box">
                            <a href="#">shirts</a>
                            <a href="#">sweater</a>
                            <a href="#">longarm</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="cat4">Women</a>
                    <div class="flyer flyer4"></div>
                    <div class="sub">
                        <div class="hover-box">
                            <a href="#">shirts</a>
                            <a href="#">sweater</a>
                            <a href="#">longarm</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#" class="cat5">Products</a>
                    <div class="flyer flyer5"></div>
                    <div class="sub">
                        <div class="hover-box">
                            <a href="#">minimal</a>
                            <a href="#">logo</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

CSS

a{ 
    text-decoration:none;
    color:#000000;
 }

#nav { 
    width:100%; height:110px; font-size:12px; 
    overflow: hidden; 
    background: green; 
    margin-top: 120px;}

ul#topnav {
    margin: 15px 0 0 300px; padding: 0;
    float:left;
    width: 100%;
    list-style: none;
    font-size: 1.1em;
    position:absolute;
    
}
ul#topnav li {
    float: left;
    margin: 0 10px 0 0; padding: 0;
    position: relative; /*--Important--*/
}
ul#topnav li a {
    float: left;
    /*text-indent: -9999px; --Push text off of page--*/
    height: 85px;
    width:109px;
    margin-right:100px;
    text-indent: -9999px;
}
.flyer{
    margin: -75px 0 0 0;
    width:53px;
    height:74px;
    position: relative;
}
.flyer3{
    background: blue;
}
.flyer4{
    background: red;
}
.flyer5{
    background: yellow;
}

.cat3 {
    background: black;
}
.cat3:hover {
    background: black;
}
.cat4 {
    background: black;
}
.cat4:hover {
    background: black;
}
.cat5 {
    background: black;
}
.cat5:hover {
    background: blue;
}

ul#topnav li .sub {
    width:300px;
    height: 130px;
    position: absolute; /*--Important--*/
    top: -150px; left: 0;
    z-index: 1;
    background: black; /*--Background gradient--*/
    padding: 20px 20px 20px;
    float: left;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-topright: 5px;
    -khtml-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-topleft: 5px;
    -khtml-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    display: none; /*--Hidden for those with js turned off--*/
    
    
}

.hover-box {
    margin-top:50px;
    margin-right:50px;
    width:40px;
    float:right;
}

ul#topnav .sub a {
    color:white;
    background: none;
    text-indent: 0px;
    height:auto;
    font-size:smaller;
}
ul#topnav .sub a:hover {
    background:none;
    
}

JavaScript

/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
* 
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne <brian@cherne.net>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);




$(document).ready(function() {  
  
  
    //On Hover Over
    function megaHoverOver(){
        $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
        (function($) {
            //Function to calculate total width of all ul's
            jQuery.fn.calcSubWidth = function() {
                rowWidth = 0;
                //Calculate row
              ...