making a menu bar switch position on one image css

Question

so here i'm trying to set some images to be my menu bar (in the header), the sample images are:

the idea is, when on page load, only the upper side of image will be shown, but, when the image is on mouse hovered, the image will switch to to bottom side only. how is this possible? here's what i tried to do, but it doesn't work:

.from
{
width: 100%;
list-style: none;
height: 63px;
}
.from:active, .from:hover
{
background-position: 0px -63px;
}
.from:current
{
background-position: 0px 0px -63px;
}

any idea how to do this properly? please note that i prefer it in div tag rather than ul li tag. oh, off topic, i also considering to implement it on the twitter bootstrap, any good advice on doing this?

Answer 1

    .from .from-1 a.current
{
background-position: 0px 0px ;
}

background position with two parametrs in px.