Edit in JSFiddle

<ul id="nav">
    <li><a href="#">A Tab!</a></li>
    <li><a href="#">Awesome Tab 2</a></li>
    <li><a href="#">Tabulicious Tab 3</a></li>
</ul>

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

body {
    padding: 0;
    margin: 0;
}

#nav {
    height: 4.5em;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    float: left;
    list-style: none;
    position: relative;
}
#nav li, #nav li a {
    position: relative;
    float: left;
}
#nav li {
    top: 15px;
    margin: 0;
    background: none;
    padding: 0;
}
#nav li a {
    display: block;
    padding: 0.9em 1.1em;
    background: url(http://www.viget.com/uploads/image/tab_body.gif) 0 0 no-repeat;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    height: 195px;
}
#nav li a span {
    display: block;
    position: absolute;
    height: 195px;
    width: 10px;
    background: url(http://www.viget.com/uploads/image/tab_r.gif) 0 0 no-repeat;
    right: 0;
    top: 0;
}
#nav li a:hover, #nav li a:hover span {
    background-position: 0 -194px;
    color: #3f5f5a;
}
#nav li a:active, #nav li a:active span {
    background-position: 0 -388px;
    color: #fff;
}

//  nav tab animation  
var navDuration = 150; //time in miliseconds
var navJumpHeight = "5px";

$('#nav li').hover(function () {
    $(this).animate({
        top: "-=" + navJumpHeight
    }, navDuration);
}, function () {
    $(this).animate({
        top: "15px"
    }, navDuration);
});