Posición del fondo simplemente vertical

Question

Tengo un menú ul que existe con imágenes con diferentes anchuras por cada li. Yo uso un sprite para las mouseover y bg. El sprite contiene todas las imágenes posibles para el menú. Cuando cierro el mouse, quiero que la imagen de fondo se deslice 160px hacia arriba en cada li, y de alguna forma herede la posición de fondo horizontal (entiendo que hereda hereda de un elemento primario, no del elemento al que llama: pase el mouse sobre).

¿Cómo puedo deslizar la posición de fondo hacia arriba y mantener la posición horizontal igual? Muestra de código a continuación. He intentado muchas cosas, incluyendo la opción de heredar en el ejemplo siguiente y sé que no es una opción CSS3 llamada background-position-y pero eso no es crossbrowser ...

#menubar ul li.item-101{ 
    width:183px; 
    background-position: 0 0; 
} 
#menubar ul li.item-102{ 
    width:163px; 
    background-position: -183px 0; 
} 
#menubar ul li.item-103{ 
    width:204px; 
    background-position: -346px 0; 
} 
#menubar ul li.item-104{ 
    width:117px; 
    background-position: -550px 0; 
} 
#menubar ul li.item-105{ 
    width:173px; 
    background-position: -667px 0; 
} 
#menubar ul li:hover{ 
    background-position: inherit -160px; 
} 

Answer 1

Actualmente no es posible con solo usar CSS (en la mayoría de los navegadores usados). Tienes que usar background-position: YOURVALUE -160px; en cada elemento emergente.

Tal vez algún día vivamos en un mundo donde esto sea posible.

soluciones posibles: jQuery pueden hacer esto para usted, pero eso es probablemente más trabajo luego simplemente copia sin cerebro pegar el individuo: se cierne, o puede utilizar background-position-y pero eso es sólo para unos pocos navegadores así que no es una opción ya sea

Answer 2

no aguantaría su aliento por background-position-y ya que ni siquiera es parte de la especificación CSS3. (El problema está aquí http://www.w3.org/Style/CSS/Tracker/issues/9). Ciertos navegadores como Chrome han seguido adelante y lo han implementado de todos modos, pero al menos Firefox y Opera aún tienen que seguir, si es que lo hacen.

A menos que quiera recurrir a javascript, no hay realmente ninguna manera de hacer esto en CSS tal como están las cosas actualmente.