JSFiddle - React, Tailwind, and code Playground

by ankur20us

HTML

<div id="categories">&nbsp;&nbsp;&nbsp;<a href="<?php echo $site_url;?>/categories.php" style="color:#FFF;">See All Categories</a></div>
    <div id="navigation">
        <ul class="top-level">
            <li><a href="#">Home</a>
                <ul class="sub-level">
                    <li><a href="#">Sub Menu Item 1</a></li>
                    <li><a href="#">Sub Menu Item 2</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">FAQ</a>
                <ul class="sub-level">
                    <li><a href="#">Sub Menu Item 1</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">News</a>
                <ul class="sub-level">
                    <li><a href="#">Sub Menu Item 1</a></li>
                    <li><a href="#">Sub Menu Item 2</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>

CSS

#categories {
     background-color:#297BCE;
     width:214px;
     height:37px;
      -moz-border-radius-topright: 8px;
      border-top-right-radius: 8px;
      -moz-border-radius-topleft: 8px;
      border-top-left-radius: 8px;
      position:absolute;
      top:67px;
      padding-top:10px;
      z-index:3;
      font: bold 15px Arial, sans-serif; color:#FFFFFF;
     }
#navigation {  position:absolute;font-size:0.75em; width:214px;top:115px;display:none;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 
/* FIRST LEVEL TEXT/BACKGROUND/BORDER SETTINGS */
ul.top-level {background:#fff;}
ul.top-level li {
 font-family: arial, sans-serif;
 font-size:14px;
 font-weight:bold;
 border:1px solid #D2D2D2; border-color:#fff #A5A5A5 #A5A5A5 #A5A5A5;
background:#fff url(images/arrow.gif) no-repeat center right;
}
/* FIRST LEVEL TEXT COLOR */
#navigation a {
 text-align:left;
 display:block;
 color: #297BCE;
 cursor: pointer;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:214px;
}
/* FIRST LEVEL TEXT HOVER COLOR */
#navigation a:hover{
 text-decoration:none;
}
/* FIRST LEVEL HOVER BACKGROUND COLOR */
#navigation li:hover {
 background-color:#297BCE;
 position: relative;
}
#navigation li{
 background-color:#FFF;
 position: relative;
}
/* SECOND LEVEL TEXT SETTINGS */
ul.sub-level li a{
    font-family: arial, sans-serif;
    font-size:12px;
    font-weight:normal;
    background-color:#FFF;
}

.sub-level {
    position: absolute;
    display: block;
    background: #FFF;
    border: #A5A5A5 solid;
    border-width: 1px;
/* set the sub menu flyout position here */
    left: 207px;
    top: -15px;
    z-index:10;
}
/* SECOND LEVEL TEXT HOVER COLOR */
#navigation ul li ul li a:hover{
 color:#FF6633;
 text-decoration:underline;
}
#navigation ul ul{
    padding-top:5px;
    padding-bottom:5px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
     box-shadow: 0px 3px 10px...

JavaScript

var hovering = {mainMenu: false, categories: false};

function closeSubMenus() {
    $('ul.sub-level').css('display', 'none');        
}
closeSubMenus();
//this is my extra div element
var tempDiv=$('<div />');
function closeMenuIfOut() {
    setTimeout(function(){
        if (!hovering.mainMenu && !hovering.categories) {
            $('#navigation').fadeOut('fast',closeSubMenus);
        }
    },100);       
}

$('ul.top-level li').hover(function() {
    var myThis=$(this);
    //this is where my pause in animation takes place
    tempDiv.show(500,function(){
        myThis.find('ul').show();
    });
    
}, function() {
    $(this).find('ul').fadeOut('fast', closeMenuIfOut);
});

$('#categories').hover(function() {
        //this is where my pause in animation takes place
        //I reused the div.
        tempDiv.show(500,function(){
            $('#navigation').show();
        });
        
        hovering.categories = true;
    },
    function(){
        hovering.categories = false;
        closeMenuIfOut();
    });

$('#navigation').hover(function() {
        hovering.mainMenu = true;
    }, function() {
        hovering.mainMenu = false;
    });