メニューにアニメーションで下線が付いてくる

Result

jQuery

$('a','nav').mouseover(function(){
    $('span','nav').animate({
        'width': $(this).width(),
         'left': $(this).position().left}
    ,'fast');
});

css

nav a{
    text-decoration:none;
    color:#333;
}
nav li{
    display:inline-block;
    margin-left:2px;
    padding:3px; 
    background:#eee;
}
nav span{
    background:#666;
    height:2px;
    display:block;
    position:relative;
    width:50px;
    left:0;
}

html

<nav><ul>
    <li><a href="#">menu01</a></li>
    <li><a href="#">menu02 / 02</a></li>
    <li><a href="#">menu03 / 03 /03</a></li>
    <li><a href="#">menu04 / 04 /04 /04</a></li>
    <li><a href="#">menu05 / 05 /05 /05 /05</a></li>
</ul>
    <span></span>
</nav>