Background-position just vertical

Question

I have a ul-menu that exists out of images with different widths for every li. I use a sprite for the mouseovers and bg. The sprite contains all the possible images for the menu. When I hover I want the background image to slide 160px up on every li, and somehow inherit the horizontal background position (I understand that inherit inherits from a parent, not from the element you call :hover on).

How can I slide the background position up, and keep the horizontal position the same. Sample code below. I tried a lot of things, including the inherit option in the example below and I know there is a CSS3 option called background-position-y but thats not 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

This is currently not possible by just using CSS (In most used browsers). You have to use background-position: YOURVALUE -160px; on every hover.

Maybe we will one day live in a world where this ís possible.

Possible solutions: jQuery can do this for you, but thats probably more work then just brainless copy pasting your individual :hovers , or you can use background-position-y but thats just for a few browsers so not really an option either