JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.gmarwaha.com/jquery/lavalamp/js/jquery.lavalamp.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="navigation">
    <ul id="main-menu">
        <li class="first"><a class="active" href="#">News 0</a>
        </li>
        <li><a href="#">News 1</a>
        </li>
        <li><a href="#">News 2</a>
        </li>
        <li><a href="#">News 3</a>
        </li>
        <li><a href="#">News 4</a>
        </li>
        <li class="last"><a href="#">News 5</a>
        </li>
    </ul>
</div>

CSS

#navigation {
    float: right;
    margin: 20px 0 0;
}
#navigation ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#navigation ul li {
    float: left;
    display: inline;
    margin: 0 30px 0 0;
    padding: 0;
}
#navigation ul li.last {
    margin: 0;
}
#navigation ul li a {
    color: #333;
    font-family:'helvanltpro55romanregular';
    font-size: 14px;
    text-decoration: none;
}
#navigation ul li a:hover {
    border-bottom: 2px solid #000;
    padding: 0;
    margin: 0;
    color: #000;
    display: inline-block;
    height: 15px;
    line-height: 14px;
}

JavaScript

/ SLIDING MENU / / $(function () {
    $("ul#main-menu li a).lavaLamp({
                fx: "
    backout ",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    // SLIDING MENU //