Edit in JSFiddle

<div id="container">
    <ul id="nav">
        <li><a href="#">You need a mac</a></li>
        <li><a href="#">Do it</a></li>
        <li><a href="#">I really like football and the redskins</a></li>
    </ul>
    <div id="nav_move">
</div>
    
<div class="clear">&nbsp;</div>
<p><small>(Click a link!)</small></p>

@import"http://viget.com/assets/stylesheets/application.css";

body {
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
}

#nav {
    position: relative;
    list-style: none;
    margin: 35px 0 0;
    float: left;
}
#nav li {
    margin: 0;
    background: none;
    padding: 0;
}
#nav li, #nav li a {
    float: left;
}
#nav a {
    color: #492b23;
    display: block;
    padding: 10px;
    margin: 0 5px 0 0;
    position: relative;
    z-index: 10;
    outline: 0;
    border: 0;
    text-decoration: underline;
}
#nav_move {
    border-top: 3px solid #333;
    position: absolute;
    background: #ecf6f5;
    display: block;
    top: 46px;
    z-index: 1;
    left: 0;
}
#nav a.cur, #nav a:hover {
    text-decoration: none;
    color: #3f5f5a;
}
.clear {
    height: 1px;
    margin-bottom: 10px;
    overflow: hidden;
    clear: both;
}
small {
    color: #bbb;
    display: block;
    font-size: 10px;
    margin-top: 5px;
}

var padding = 20;

$('#nav a').click(function () {
    var offset = $(this).offset();
    
    $('#nav_move').animate({
        height: $(this).height(),
        left: offset.left,
        width: $(this).width() + padding
    }, {
        duration: 350,
        easing: 'easeInOutCirc'
    });
    
    $('.cur').removeClass('cur');
    $(this).addClass('cur');
    
    return false;
    
});

$("#nav a:first").click();