Making a vertical nav using css sprite - css

Question

Hi i am having trouble making a vertical navigation using a sprite as a .gif file.
I want to have it with a gray background and use my sprite to change as I hover. If you look at my sprite i have 2 pairs of each button, i want the faded icon to be there first then when hovered it moves it to the 100% opacity icon. Here is what i have so far...
link to view my sprite
my css:
#socialmedia {
margin: 0;
padding: 0;
list-style: none;
background:#666;
width:150px;
}
#socialmedia a {
display:block;
width:137px;
height:10px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color: #000;no-repeat;
text-decoration: none;
}
#socialmedia a:hover {
background-position: -157px 0;
color: #fff;
background: url("images/buttons.gif") 0 0
}
#socialmedia a:active {
background-position: -314px 0;
color:white;
}
my html:
<ul id="socialmedia">
<li>FB</li>
<li>TW </li>
<li>LI</li>
<li>GM</li>
<li>YH</li>
</ul>

Answer 1

I'd change a couple of things with your sprite to make it easier - the images should have no space between them and the icons should be aligned vertically, unless you want them to move horizontally when moused over in addition to changing opacity?
At any rate, you could do something like this:
#socialmedia {
margin: 0;
padding: 0;
list-style: none;
background:#666;
width:150px;
}
#socialmedia li a {
display:block;
width:137px;
height:10px;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px/1em sans-serif;
color: #666;
background: transparent url("buttons1.gif") 0 0 no-repeat;
text-decoration: none;
}
#socialmedia li a:hover {
background-position: 0 -32px;
color: #fff;
}
#socialmedia li a.twitter {
background-position: 0 -63px;
}
#socialmedia li a.linkedin {
background-position: 0 -127px;
}
#socialmedia li a.google {
background-position: 0 -191px;
}
#socialmedia li a.yahoo {
background-position: 0 -255px;
}
#socialmedia li a.twitter:hover {
background-position: 0 -95px;
}
#socialmedia li a.linkedin:hover {
background-position: 0 -159px;
}
#socialmedia li a.google:hover {
background-position: 0 -223px;
}
#socialmedia li a.yahoo:hover {
background-position: 0 -287px;
}
Then in your html just add the correct classes:
<ul id="socialmedia">
<li>FB</li>
<li>TW </li>
<li>LI</li>
<li>GM</li>
<li>YH</li>
</ul>
Oh, and you'll need a different color for your link text - #000 won't work too well on top of black :)
I changed it to #666.