JSFiddle - React, Tailwind, and code Playground

by tucado

HTML

<nav class="overflow">
            	<ul>
                    <a id="b1" href="../index.html">	<li>HOME	<div></div>	</li></a>
                    <a id="b2" href="../tour.html">		<li>TOUR	<div></div>	</li></a>
                    <a id="b3" href="../bio.html">		<li>BIO		<div></div>	</li></a>
				</ul>
            </nav>

CSS

.overflow {overflow:hidden;}
nav ul {list-style-type:none; margin:0; padding:0}

nav { padding:12px; margin-top:10px; text-align:center; background-color: rgba(0, 0, 0, 0.8); padding-bottom:33px; height:74px;}

nav a {
	height:95px;
	width:150px; 
    display:block;
    float:left;
    margin: 0 3px;
	text-decoration:none;
	background-color:#acacac;
}

nav li {
	font-size:16px !important;
    background-color:#cb2026;
    display:block;
    float:left;
    padding: 65px 0 0 0px;
    width: 150px;
    height:30px;
    color:#acacac;
    position:relative;
	z-index:10;
	text-decoration:none;
    font-weight:normal;
    color:#333;
}


nav li div {
    position:absolute;
    top:0;
    left:0;
    float:left;
    width:150px;
    height:0;
    background-color: #cb2026;
    color:#e8cfa1;
    display:none;
	display:block;
	z-index:-10;
}

JavaScript

$(document).ready(function(){
    $("nav a").mouseenter(function () {
        if ($(this).data('fading'))  //EXIT IF WE ARE FADING
            return;
        $('div', this).stop(true, false).animate({	
            'height': '45px'
        }, 100);
        $('li', this).css('color', '#fff');     // THIS IS THE LINE I'M AFTER - I want the color to change smoothly, not instantly
        $('li', this).stop(true, false).animate({	
            'padding-top': '15px'
        }, 200);
    }).mouseleave(function () {
        if ($(this).data('fading'))  
            return;
        $('div', this).stop(true, false).animate({  
            'height': '0px'
        }, 300);

        $('li', this).stop(true, false).animate({	
            'padding-top': '65px'
        }, 500);
    });

});