Question

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 sprite image for both a:link and a:hover. I am just increasing the width in case of a:hover to create a pop out effect.

Consider this analogy. If my tabs are all aligned at x=0, here’s my scenario currently.

a:link   tab start: x=-100   tab end: x=0  // this is how all links are arranged
a:hover  tab start: x=-110   tab end: x=0  // this is how I want them on hover
a:hover  tab start: x=-100   tab end: x=10 // this is how its panning 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;
}

Can somebody help me out here?

Thanks

Answer 1

Well, if you want to move it up or down, then you should change the y position (i.e. the second) and if you want it to slide to the left or to the right, you should change the x position:

background-position: x y;

So, if I understand correctly, you want to keep the background image aligned to the left, even when you hover the link:

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

Is this what you want?

Btw, your question’s a bit ambiguous. You’re saying that the size of the image is “increasing to the right” (I don’t know what you mean by that but it relates to the x-axis) and then you start talking about “base” and “head” (y-axis)