Menu que acompanha o mouse

css.css

#menu_linha { list-style: none; position: relative; }
#menu_linha li { display: inline; }
#menu_linha li a { color: #676565; font:bold 13px arial, verdana; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; }
#menu_linha li a:hover { color: #F27B21; }
#magic-line { position: absolute; bottom: -22px; left: 0; width: 100px; height: 1px; background: #F27B21; }
#menu_linha li.ativo a { color:#F27B21 !important; }

index.html

<div id="menu">
   <ul id="menu_linha">
      <li class="ativo"><a href="#">Home</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
   </ul>
</div>

js.js

$(function(){
   // Animar menu
   var $el, leftPos, newWidth, $mainNav = $("#menu_linha");
   $mainNav.append("<li id='magic-line'></li>");
   var $magicLine = $("#magic-line");
   $magicLine
        .width($(".ativo a").width())
        .css("left", $(".ativo a").position().left+10)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

   $("#menu_linha li").find("a").hover(function() {
      $el = $(this);
      leftPos = $el.position().left+10;
      newWidth = $el.parent().width()-20;

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