Hello all

I am trying to create to a vertical navigation menu using CSS sprites. I want to put in it a hover effect where the menu option slides out a bit.

a:link {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 150px;
}

a:hover {
  background: url(images/nav.png);
  background-position: -100px 0px;
  width: 160px;
}

So I am using the same image, I am just increasing its size to create a pop out effect.

But my problem is that right now the image's size is increasing to the right. I want to keep the image's base aligned and its head should pop out. Here's my complete css code:

#navmenu {
    left: 100px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 150px;
    width: 150px;
    z-index: 99;
}

#navmenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#navmenu ul li {
    line-height: 1.5em;
    padding: 0px;
}

#navimenu ul li a {
    color: black;
    display: block;
    font-weight: bold;
    height: 26px;
    padding: 0px 15px 0px 0px;
    text-align: right;
    width: 150px;
}

#navmenu a:link, #navmenu a:visited {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 150px;
}

#navmenu a:hover {
    background: url(images/nav.png) no-repeat;
    background-position: -150px 0px;
    width: 160px;
}

Don't know how much if I've put the problem correctly but can somebody help me out here?

Thanks