１枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。

質問

はじめまして。初歩的な質問で非常に申し訳ないのですが
今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。

ナビゲーションメニューを作っているのですが、
１枚画像でロールオーバーという方法でやっています。

[やりたいこと]
「横978px 縦40pxの画像を使って
６つのメニューに分けて、ロールオーバーをしているようにみせる」

[うまくいかない事]
・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。
・最初の「home」以外が全くロールオーバーしてくれない・・・

どこかおかしなところがあれば教えてください・・
よろしくお願いいたします。

【HTML】
<div id="navigation">
<ul>
<li id="bttop"><a href="#" title="Home">Home</a></li>
<li id="btdai"><a href="#" title="menu1">menu1</a></li>
<li id="btsyo"><a href="#" title="menu2">menu2</a></li>
<li id="btweb"><a href="#" title="menu3">menu3</a></li>
<li id="btmap"><a href="#" title="menu4">menu4</a></li>
<li id="bttel"><a href="#" title="menu5">menu5</a></li>
</ul>
</div>

【CSS】
#navigation {
position: absolute;
width: 978px;
}
#navigation ul {
width: 978px;
height:40px;
margin: 0;
padding: 0;
list-style: none;
}
#navigation li {
margin: 0;
padding: 0;
width: 978px;
height: 40px;
text-indent: -9999px;
}
#navigation li a {
width: 163px;
height: 40px;
text-decoration: none;
display: block;
float:left;
}

#navigation li#bttop {
background: url(img/navi_bar.jpg) no-repeat 0px 0px;
}
#navigation li#btdai {
background: url(img/navi_bar.jpg) no-repeat 163px 0px;
}
#navigation li#btsyo {
background: url(img/navi_bar.jpg) no-repeat 326px 0px;
}
#navigation li#btweb {
background: url(img/navi_bar.jpg) no-repeat 489px 0px;
}
#navigation li#btmap {
background: url(img/navi_bar.jpg) no-repeat 652px 0px;
}
#navigation li#bttel {
background: url(img/navi_bar.jpg) no-repeat 815px 0px;
}

/* マウスオーバー時の指定
---------------------------------------------------- */
#navigation li#bttop a:hover {
background: url(img/navi_bar.jpg) no-repeat 0px -40px;
}
#navigation li#btdai a:hover {
background: url(img/navi_bar.jpg) no-repeat 163px -40px;
}
#navigation li#btsyo a:hover {
background: url(img/navi_bar.jpg) no-repeat 326px -40px;
}
#navigation li#btweb a:hover {
background: url(img/navi_bar.jpg) no-repeat 489px -40px;
}
#navigation li#btmap a:hover {
background: url(img/navi_bar.jpg) no-repeat 652px -40px;
}
#navigation li#bttel a:hover {
background: url(img/navi_bar.jpg) no-repeat 815px -40px;
}

回答No.1

Naruhodow

えーと、文章だけだと現状がよくわからないですが、たぶんこんなことかなー？と思おうことをさっくりと答えますね。

１．リストタグをインラインにしないと、縦並びに表示されますので、
リストタグのCSSを
display: inline;
にします。

２．疑似クラスの画像の位置指定ですが、a:hover しか指定しないと画像は動いてくれません。

a:link
a:visited
a:hover
a:active

全部を指定しましょう。
ちなみに、順番が違うだけで動いてくれません。

参考になると思うページ
AllAbout　実は重要！スタイルシートの記述順！　a:hover使ってもリンク無変化!?
http://allabout.co.jp/internet/hpcreate/closeup/CU20050621A/index.htm

お礼

もう一度自分で書いたCSSを最初から最後まで見直しました。

すると画像の位置指定が悪いということに気づき、以下のように書き直したところ、無事解決しました。

主な変更点は、横長のメニューだったので
163px 326px....と、右にずらしていたのですが、
よくよく考えると右にずらすと同じ画像が横に増えるというだけなので
マイナスにするべきなのでした。
-163px -326px....と修正したことにより解決できました！

---省略。

#navi li#bttop {
background: url(img/navi_bar.jpg) no-repeat 0px 0px;
}
#navi li#btdai {
background: url(img/navi_bar.jpg) no-repeat -163px 0px;
}
#navi li#btsyo {
background: url(img/navi_bar.jpg) no-repeat -326px 0px;
}
#navi li#btweb {
background: url(img/navi_bar.jpg) no-repeat -489px 0px;
}
#navi li#btmap {
background: url(img/navi_bar.jpg) no-repeat -652px 0px;
}
#navi li#bttel {
background: url(img/navi_bar.jpg) no-repeat -815px 0px;
}

/* マウスオーバー時の指定
---------------------------------------------------- */
#navi li#bttop a:hover {
background: url(img/navi_bar.jpg) no-repeat 0px -40px;
}
#navi li#btdai a:hover {
background: url(img/navi_bar.jpg) no-repeat -163px -40px;
}
#navi li#btsyo a:hover {
background: url(img/navi_bar.jpg) no-repeat -326px -40px;
}
#navi li#btweb a:hover {
background: url(img/navi_bar.jpg) no-repeat -489px -40px;
}
#navi li#btmap a:hover {
background: url(img/navi_bar.jpg) no-repeat -652px -40px;
}
#navi li#bttel a:hover {
background: url(img/navi_bar.jpg) no-repeat -815px -40px;
}

Naruhodowさんのおっしゃるようにhorver以外も指定するべきなのでしょうね・・・
CSSが長くなって見づらくなるだろうと今までしていませんでしたが
これからはつける癖をつけたいとおもいます。
ありがとうございました！