Sovrapposizione immagini.

[stakkit]

Salve!
Ho un problema con CSS che non riesco a risolvere potete darmi un aiuto? grazie!
Ho un menu del tipo:

<ul>[*]
         [url="#"]voce1[/url]
     [*]
         [url="#"]voce2[/url]
     [/list] 

in css ho dato a li una immagine (2x50 px) per separare i menu:

ul > li {
    background: url(images/separate.png) no-repeat right; 
    } 

e un immagine (1x50 px) hover:

ul > li a:hover {
    background: url(images/nav-hover.jpg) repeat-x; 
    } 

Il problema è che quando si passa il muose sopra una voce del menu, sparisce l'immagine separate.png, come se l'immagine nav-hover.jpg si sovrapponesse.

Sapete dirmi qual'è il problema?

Grazie!

[Prill]

Provato ad assegnare alla voce elenco un padding-right corrispondente alla larghezza dello sfondo (che resterà così visibile non essendo coperto dallo sfondo impostato sull'elemento al suo interno)?

[stakkit]

Originariamente inviato da Prill
Provato ad assegnare alla voce elenco un padding-right corrispondente alla larghezza dello sfondo (che resterà così visibile non essendo coperto dallo sfondo impostato sull'elemento al suo interno)?

Grazie mille Prill!!
sei un genio! ora si vede!
Grazie!