JSFiddle - React, Tailwind, and code Playground

Animated Menu Using CSS Only or CSS and jQuery

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div id="container">
    <span class="title">Pure CSS Animation</span>
    <ul id="menu-css">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
         <ul>                               <li><a href="#">About2</a></li>                
            </ul>
        </li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    
    <span class="title">jQuery Animation</span>
    <ul id="menu-jquery">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    
</div>

CSS

body {
    margin: 0;
    font-family: 'Yanone Kaffeesatz';
    font-size: 14px;
    line-height: 1.5;
    background: #909090 url("http://jenniferperrin.com/image/background.gif");
    text-align: center;
}

#container {
    margin: 2% auto 0 auto;
    display: block;
    width: 400px; 
}

.title {
    font-size: 30px;
    font-family: 'Yanone Kaffeesatz';
    color: #efefef;
    margin: 1em 0 0 0;
    text-shadow: 0px 1px 1px #444;
    display: block;
}

ul {
}

#menu-css li, #menu-jquery li {
    display: inline;
    list-style: none; 
}


/* For CSS ONLY Menu */
    
#menu-css li a {
    
    /* Border Radius */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    /* Border Shadow */
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    
    /* Animation (Webkit, Gecko & Mozilla) */
    -webkit-transition-duration: 0.20s;
    -webkit-transition-timing-function: ease-out; 
    -moz-transition-duration: 0.20s;
    -moz-transition-timing-function: ease-out; 
    
    color: #efefef;
    font-size: 18px;
    background: rgba(0,0,0,0.2);
    display: inline-block;
    padding: 5px 15px;
    outline: none;
    text-decoration: none;
}

    #menu-css li a:hover {
        background: rgba(0,0,0,0.5);
        padding: 5px 25px;
    }

    #menu-css li a:active {
        background: rgba(0,0,0,0.1);
        -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
        -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
        box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
    }
    

/* For the CSS & jQuery Menu */

#menu-jquery li a {
    
    /* Border Radius */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    
    /* Border Shadow */
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    
    color:...

JavaScript

/**
 * http://jenniferperrin.com/blog/animated-menu-using-css-only-or-css-and-jquery
 **/

$(document).ready(function() {
    $('#menu-jquery li a').hover(
    function() {
        $(this).css('padding', '5px 15px').animate({
            'paddingLeft': '25px',
            'paddingRight': '25px',
            'backgroundColor': 'rgba(0,0,0,0.5)'
        }, 'fast');
    }, function() {
        $(this).css('padding', '5px 25px').animate({
            'paddingLeft': '15px',
            'paddingRight': '15px',
            'backgroundColor': 'rgba(0,0,0,0.2)'
        }, 'fast');
    }).mousedown(function() {
        $(this).animate({
            'backgroundColor': 'rgba(0,0,0,0.1)'
        }, 'fast');
    }).mouseup(function() {
        $(this).animate({
            'backgroundColor': 'rgba(0,0,0,0.5)'
        }, 'fast');
    });
});