mouseover mouseout not working animation on multiple ul's

Question

Does anybody know how to make my script work for multiple ul's?

Please take a look at my jsfiddle.
As you can see, the script only works for the second ul on mouseover.

Thank you in advanced!
With Kind Regards,
Jonathan

Answer 1

So let me explain, what was happening. you were only selecting the last created div, so only that one was going.

I had to find the selected .active and the selected div

Here is example:

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

In mouseover i added this to the top to change active and animation vars

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

In mouseout i added this.

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

EDIT: For the problem with moving the class active to other <li> objects, you have to append the <div> for each .active class separately Here is the example:

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

What I did was wrap the animation var into a .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);
});

Instead or prepending to the <ul> like before, I did it to the parent of the parent which should always be there for a menu with the class active.