hovering an list item anchor with an active state

Question

I have a menu with an active class.

Based on my fiddle I think having a basic question:
On my mouseOut I want the active class back at the place I putted it in first. But how?

A more advanced question:
In my question above (after it works), is it possible to animate the border-bottom (seeying it move vertical) beteween them?

Thank you in advanced!
With Kind Regards,
Jonathan

Answer 1

This http://jsfiddle.net/FPezz/2/ may solve your problem if I understand it correctly:

$(document).ready(function() {

    var active = $('ul li a').filter('.active');

    $('ul').hover(function() {
        $(this).find('li a').removeClass('active');

    }, function() {
        active.addClass('active');
    });

});​