JSFiddle - React, Tailwind, and code Playground

HTML

<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2'></script>
  <script type='text/javascript' src='js/jquery.color-RGBa-patch.js'></script>
  <script type='text/javascript' src='js/example.js'></script>
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</script>

<div class="nav-wrap">
		<ul class="group" id="example-one">
            <li class="current_page_item"><a href="index.html">Home</a></li>
            <li><a href="bio.html">Biography</a></li>
            <li><a href="art.html">Art</a></li>
            <li><a href="visual.html">Visual </a></li>
            <li><a href="theories.html">Theories</a></li>
            <li><a href="contact.html">Contact</a></li>
          
        </ul>

CSS

/** Navigation */
.nav-wrap { margin: 0px auto;  background-color: rgba(0,0,0,0.6); border-top: none; border-bottom: 2px solid white; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 150px; height: 2px; background: #ca1f7e; }

#example-two { margin: 0 auto; list-style: none; position: relative; width: 940px; }
#example-two li { display: inline; }
#example-two li a { position: relative; z-index: 200; color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-two li a:hover { color: #F06; }
#example-two #magic-line-two { position: absolute; top: 0; left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100; }

.current_page_item a, .current_page_item_two a { color: white}

JavaScript

$(function(){

var $el, leftPos, newWidth,
    $mainNav = $("#example-one"),
    $mainNav2 = $("#example-two");

/*
    EXAMPLE ONE
*/
$mainNav.append("<li id='magic-line'></li>");

var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});


/*
    EXAMPLE TWO
*/
$mainNav2.append("<li id='magic-line-two'></li>");

var $magicLineTwo = $("#magic-line-two");

$magicLineTwo
    .width($(".current_page_item_two").width())
    .height($mainNav2.height())
    .css("left", $(".current_page_item_two a").position().left)
    .data("origLeft", $(".current_page_item_two a").position().left)
    .data("origWidth", $magicLineTwo.width())
    .data("origColor", $(".current_page_item_two a").attr("rel"));

$("#example-two li").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLineTwo.stop().animate({
        left: leftPos,
        width: newWidth,
        backgroundColor: $el.attr("rel")
    })
}, function() {
    $magicLineTwo.stop().animate({
        left: $magicLineTwo.data("origLeft"),
        width: $magicLineTwo.data("origWidth"),
        backgroundColor: $magicLineTwo.data("origColor")
    });    
});
});