CSS Sprite（縦移動）

HTMLとCSS

横並びのナビボタンをマウスオーバーで切り替える方法。

#nav ul{
  width:800px;
  overflow: hidden;
}
#nav li{
  float: left;
}
#nav li a{
  width: 160px;
  height:60px;
  display: block;
  background: url(../img/btn.jpg) no-repeat 0 0;
}
#nav li#home a:link{
  background-position: 0 0;
}
#nav li#home a:hover{
  background-position: 0 -70px;
}

全部のボタンが1枚の画像になってるので、「li a」で読み込んでおいて、それぞれは「position」で位置指定すればよい。