Background position

[foxissimo]

Buongiorno a tutti.

Ho un menu molto semplice così composto

<ul>
        <li id="studio">[url="#"][img]img/menu/blank.gif[/img][/url]
        <li id="contatti">[url="#"][img]img/menu/blank.gif[/img][/url]
        <li id="p3">[img]img/menu/blank.gif[/img][/list] 

E questo il foglio di stile che ne anima il comportamento al passaggio del mouse. Le immagini sono "doppie", sposto il background dello sfondo quando ci si passa sopra col mouse.

div#left li#studio {
    background: url(img/menu/studio.jpg) no-repeat 0 5px;
}

div#left li#contatti {
    background: url(img/menu/contatti.jpg) no-repeat 0 5px;
}

div#left li#p3 {
    background: url(img/menu/portfolio.jpg) no-repeat 0 5px;
    cursor:pointer;
}

div#left li#studio:hover, div#left li#contatti:hover,div#left li#p3:hover, {
    background-position:0 -21px;
} 

e fin qua tutto funzionante. Ora voglio avere la possibilità di mostrare attiva (uguale allo stato hover) una voce del menu. Ho provato allora ad agire così:

<li id="studio" class="attivo">[url="#"][img]img/menu/blank.gif[/img][/url]

.attivo {background-position:0 -21px;} 

ma non funziona! se provo ad impostare un'altra proprietà, tipo un bordo, tutto funziona, ma il background-position no.

Come fareste voi?