Result
http://jsfiddle.net/kachibito/keLPE/embedded/result,js,css,html
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>