cssで、一枚の画像でロールオーバーができない。

質問

一枚の画像でロールオーバーさせたいのですが、
どうしてもうまくいきません；

全体　幅495px,高さ60px　の画像。
幅99x30pxのボタンで、縦2,横5つ並んでいます。
縦１行目に、通常ボタンが横5つ。
縦２行目に、オンマウスボタンが横5つ。
nav1~nav5のボタンに、
通常は、１行目、１つ目のボタンが表示されていて、
オンマウスすると、画像が消えてしまいます。
わかる方、回答お願いします。

■html
<div id="globalnav">
<ul>
<li id="nav1"><a href="#">a</a></li>
<li id="nav2"><a href="#">b</a></li>
<li id="nav3"><a href="#">c</a></li>
<li id="nav4"><a href="#">d</a></li>
<li id="nav5"><a href="#">e</a></li>
</ul>
</div>

■css
#globalnav{
width:495px;
height:30px;
margin-left:305px;
margin-top:70px;
padding:0;
}

#globalnav ul{
list-style: none;
margin:0;
padding:0;
}

#globalnav li{
float:left;
width:99px;
margin:0;
padding:0;
text-indent:-9999px;
}

#globalnav li a{
display:block;
text-decoration:none;
width:99px;
height:30px;
background: url(rollover.gif) no-repeat;
}

/*通常*/
#nav1 a { background: 0 0; }
#nav2 a { background: -99px 0; }
#nav3 a { background: -198px 0; }
#nav4 a { background: -297px 0; }
#nav5 a { background: -396px 0; }

/*オンマウス*/
#nav1 a:hover { background: 0 -30px; }
#nav2 a:hover { background: -99px -30px; }
#nav3 a:hover { background: -198px -30px; }
#nav4 a:hover { background: -297px -30px; }
#nav5 a:hover { background: -396px -30px; }

回答No.1

noname#66720 · ベストアンサー

backgroundで指定しなおすと背景画像の指定などもリセットされてしまいます。
background-positionを使いましょう。

あと、

#nav1 a:link, #nav1 a:visited { background-position: 0 0; }

このように擬似クラスで指定したほうが良いです。

お礼

回答が大変遅くなりまして、申し訳ありません。。
ありがとうございました！