Question

I currently am working a CSS navigation system on my client’s website at http://cjcdigital.net/clients/andrea and while the top navigation has been working fine, I am unable to recreate the rollover effect on the vertical sidebar containing the social media buttons.

To achieve the top navigation effects I followed the steps at:
http://www.elated.com/articles/css-rollover-buttons/
With my navigation elements each being stacked top/bottom.

For the side navigation however, despite setting the image:hover to push the sprite to the left, the image hover property does not kick in at all.

Below is some code from the top nav, and below that is code form the side nav.

#headerMenu {width: 1200px;}
#headerMenu ul{display: inline;}
#headerMenu li a{top:334px; position:absolute;}
#magazine
{
  display: block;
  width: 112px;
  height: 17px;
  background: url("./images/magazine.gif") no-repeat 0 0;
  left:160px;

}

#magazine:hover
{ 
  background-position: 0 -17px;
}

#magazine span
{
  position: absolute;
  top: -999em;
}

Social Navigation

#facebook
{
  display: block;
  width: 149px;
  height: 57px;
  background: url("./images/facebook.gif") no-repeat 0 0;
}

#facebook:hover
{ 
  background-position: -300 0;
}

#facebook span
{
  position: absolute;
  top: -999em;
}

Thanks in advance for any assistance

Answer 1

You haven’t specified any units in your CSS declaration for #facebook:hover. You probably wanted to do something like:

#facebook:hover
{ 
  background-position: -300px 0;
}