JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li>
            <a href="#">ABOUT</a>
            <ul>
                <li><a href="#">BACKGROUND</a></li>
                <li><a href="#">BOARD MEMBERS</a></li>
                <li><a href="#">CORPORATE PROJECTS</a></li>
            </ul>
        </li>
        <li><a href="#">PRODUCTS</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

CSS

body {
    margin:0;
    font-family:Helvetica Neue, Arial, sans-serif;
}

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

nav {
    background:#000;
    display: table;
	width: 100%;
	border-collapse: collapse;
	border: none;
    /* overflow:hidden; */
}

/* 1ST LEVEL STYLING */
nav ul {
    list-style:none;
    padding:0;
    display: table-row;
}

nav ul li {
	display: table-cell;
    text-align:center;
    position:relative;
}

nav ul li a {
    line-height:40px;
    display:block;
}

/* INITIAL STYLING FOR 2ND LEVEL UL CONTAINER */
nav ul li ul {
    display:none;
    position:absolute;
    background:#777;
    top:50px;
}

/* ACTIVATE 2ND LEVEL ON MOUSEOVER */

nav ul li:hover a {
    color:#0FF;
}

/* 2ND LEVEL STYLING */
nav ul li ul li,
nav ul li ul li a {
    display:block;
}
nav ul li ul li a {
    padding:0 10px;
    white-space:nowrap;
    color:#FFF !important;
}
nav ul li ul li:hover a {
    color:#0FF !important
}

JavaScript

function usingOn() {
    nav.on({
        mouseenter: function() {
            $(this).find('ul').css('display','block').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
        },
        mouseleave: function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false, complete: function () {
                            // Animation complete.
                            $(this).css('display','none');
                        } });  
        }
    });
}

function usingHover() {
    nav.hover(
        function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
        },
        function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false });  
        }
    );
}

function usingBind() {
    nav.find('ul').eq(0).bind('mouseenter', function() {
        $(this).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
    });

    nav.find('ul').eq(0).bind('mouseleave', function() {
        $(this).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false });  
    });
}

var nav = $('nav ul li');
nav.find('ul').eq(0).css({ opacity: '0' , top: '50px' }).end();

usingOn();
//usingHover();
//usingBind();