jquery css überschneidung

[Nalia]

Hallo Leute,
ich probiere schon seit Stunden an einem kleinen Problem rum.
Meine Menüpunkte sollen sich bei mouseover drehen, skalieren und Farbe ändern. Das klappt soweit. Wenn man dann auf einen Menüpunkt klickt, soll dieser in der gleichen Art bestehen bleiben (also gedreht, skaliert und die neue Farbe). Ich bekomme es nur immer hin, dass entweder das eine klappt oder das andere, also mouseover ODER click. Vielleicht kann mir jemand auf die Sprünge helfen, wo mein Denkfehler liegt?

Hier der js-Code:

    $("#nav li:not(.nav_active)").mouseover(function() {
        $(this).css({
            transform: 'rotate(-8deg) scale(1.2)',
            background: '#906'
        },2000);
    })

    $('#nav li:not(.nav_active)').mouseout(function() {
        $(this).removeAttr('style');
    })

    $('#nav li').click( function() {
        $('#nav li').removeClass('nav_active');
        $('#nav li').not('.nav_active').removeAttr('style');
        $(this).addClass('nav_active').css({
            transform: 'rotate(-8deg) scale(1.2)',
            background: '#906'
        });
 
    })