mouseover mouseout no funciona animación en múltiples ul

Así que déjame explicarte lo que estaba sucediendo. solo estaba seleccionando el último div creado, por lo que solo iba ese.

Tuve que encontrar el seleccionado .active y el seleccionado div

He aquí un ejemplo:

http://jsfiddle.net/JoshuaPack/YFUsJ/23/

In mouseover agregué esto en la parte superior para cambiar active y animation vars

    active = $(this).parent().find('.active');
    animation = $(this).parent().find('div');

In mouseout agregué esto

    active = $(this).find('.active');
    animation = $(this).find('div');

EDIT: Por el problema de mover la clase active para otro <li> objetos, tienes que añadir el <div> para cada .active clase por separado Aquí está el ejemplo:

http://jsfiddle.net/JoshuaPack/YFUsJ/31/

Lo que hice fue envolver la variable de animación en un .each

$.each(active, function() {
    var animation = $('<div>').css({
        'position': 'absolute',
        'height': $(this).outerHeight()-1,
        'width': $(this).outerWidth(),
        'marginTop': ($(this).parent().index() * $(this).outerHeight()),
        'borderBottom': '1px solid #000',
        'z-index': -10
    });
    $(this).parent().parent().prepend(animation);
});

En lugar o precediendo a la <ul> como antes, se lo hice al padre del padre que siempre debe estar ahí para un menú con la clase active.