菜单上的动画，平滑滚动边框底部

Question

我的目标是产生这样的效果：http://css-tricks.com/jquery-magicline-navigation/但是我没有使用额外的浮动<li></li>我想使用border-bottom属性 - 它甚至可能吗？我试过这样的事情：

$('ul#top_main_menu li a').hover(
    function () {
      $(this).addClass("active").animate(100);
    },
    function () {
      $(this).removeClass("active").animate(100);
    }
  );

其中.active类添加到我的<a href=""></a>标记border-bottom: 2px solid #A7E108; - 任何人都知道如何动画它以便在悬停元素后顺畅滚动？