css - css スプライトを使用して垂直ナビゲーションを作成する

Question

こんにちは、スプライトを .gif ファイルとして使用して垂直方向のナビゲーションを作成するのに問題があります。背景を灰色にして、ホバーするとスプライトを使用して変更したいと考えています。私のスプライトを見ると、各ボタンのペアが 2 つあります。最初に色あせたアイコンを表示し、ホバーすると不透明度 100% のアイコンに移動します。これが私がこれまでに持っているものです...私のスプライト
と私の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;
    }

私のhtml：

<ul id="socialmedia"> 
<li><a href="">FB</a></li> 
<li><a href="">TW</a> </li>
<li><a href="">LI</a></li> 
<li><a href="">GM</a></li>
<li><a href="">YH</a></li> 
</ul>