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?

[cdjjj]

ciao foxissimo, credo che il background-position funziona, pero' te lo copre la img che sta dentro al link

[foxissimo]

Ma no... il background position funziona perfettamente, lo dimostra che su :hover il background cambia...e l'immagine a cui applico il link è una gif completamente trasparente... il mio problema è che voglio far spostare lo sfondo sia quando gli passo sopra con il mouse, sia quando all'elemento[*] è applicata la classe "attivo"... è questo che non capisco...

[foxissimo]

Ho risolto...

bastava specificare nel css anche l'id.

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

cosi funziona alla grande!

ciao e grazie