CSS ロールオーバーの画像が表示されません

質問

CSSでロールオーバーのメニューを作りましたが、
画像が表示されません…参考書どおりに作っているはずなのですが…
どなたかお知恵をお貸しください。

【css】
.menu {
width:860px;
height:70px;
margin-top:5px;
}

.menu #visamadhi a {background-image:url(navi-aboutvisamadhi.gif);}

.menu #kirei a {background-image:url(navi-kireininaritai.gif);}

.menu #manabi a {background-image:url(navi-manSabitai.gif);}

.menu #shiritai a {background-image:url(navi-jibunshiritai.gif);}

.menu #shouhin a {background-image:url(navi-shouhin.gif);}

.menu ul { margin:0; padding:0; }

.menu li {list-style-type:none; float:left;}

.menu li a {
display:block;
width:160px;
line-height:70px;
border: 1px solid #D8D1AD;
text-indent:-9999px;
margin-right:5px;
margin-left: 5px;
overflow: hidden;
}

.menu li a:hover {background-position:0px -80px;}

【html】
<div class="menu">
<ul>
<li id="#visamadhi"><a href="">Visamadhiとは</a></li>
<li id="#kirei"><a href="">きれいになりたい</a></li>
<li id="#manabi"><a href="">学びたい</a></li>
<li id="#shiritai"><a href="">自分を知りたい</a></li>
<li id="#shouhin"><a href="">商品を使いたい</a></li>
</ul>
</div>

実際に作成したcssを格納しました。
以下URLよりダウンロードしていただけるとありがたいです。

http://firestorage.jp/download/7ebe12eca202b26ce2171225270a8ffe53c820e9

回答No.2

ORUKA1951

意味を理解してますか？
.menu #shiritai a {background-image:url(navi-jibunshiritai.gif);}
は、詳細度[a,b,c,d]が、[0,1,1,1]ですね。ですから、classセレクタは書かなくても、一意に場所を要素が特定できますから、CSS2.1(現在Web標準と認められている)では、
*.menu *#shiritai a {background-image:url(navi-jibunshiritai.gif);}
と同義ですね。

よって、li#shiritai a{}が本来の指定方法です。詳細度[0,0,1,2]・・

詳細度を比較して、詳細度が高いほうが優先されます。カスケーディングスタイルシートのカスケーディングはCSSの最も重要な部分です。それこそCSSのCSSたる由縁です。
　詳細度が低いことと、異なる要素に背景の扱いを指定しているからダメなのです。

★お使いのマニュアルにカスケーディングの仕組みの説明がないようでしたらゴミです。
6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )
　ただし、この邦訳はCSS2のものでCSS2.1の邦訳はありません。現在ウェブ標準とされているものはCSS2.1です。残念ながらこのカスケード処理の詳細度の計算はCSS2とCSS2.1では変更があります。
6.4 The cascade ( http://www.w3.org/TR/CSS2/cascade.html#cascade )

　このHTMLの場合、リンク終点でもないのにidで指定する意味はありませんね。idはデザインのために付けるものではありません。
★きちんと、スタイルシートとHTMLを理解していれば、このようなHTML/CSSにはならないはずです。

<div class="nav"><!-- navのほうが良いかも -->
<ul>
<li><a href="" style="background-image:url(navi-aboutvisamadhi.gif);}">Visamadhiとは</a></li>
<li><a href="" style="background-image:url(navi-kireininaritai.gif);}">きれいになりたい</a></li>
<li><a href="" style="background-image:url(navi-navi-manSabitai.gif);}">学びたい</a></li>
<li><a href="" style="background-image:url(navi-jibunshiritai.gif);}">自分を知りたい</a></li>
<li><a href="" style="background-image:url(navi-shouhin.gif);}">商品を使いたい</a></li>
</ul>
</div>

で良い。この場合スタイルの詳細度は[1,0,0,0]になりますから最優先されます。無駄なIDも不要です。HTMLを書くのも楽でしょう。

スタイルシートは簡単に・・
1)グループ化できるものはグループ化して同じプロパティを書かない。
2)詳細度をきちんと考慮して記述する。
3)全称セレクタは省略しない
　基本ですから、このくらいは守らないと・・

div.nav ul,div.nav ul li,div.nav ul li a{display:block;list-style:none;margin:0;padding:0;}
div.nav ul{width:860px; height:70px;line-height:70px;margin-top:5px;}
div.nav ul li{width:160px;margin-left:3px;height:100%;float:left;}
div.nav ul li a{width:100%;height:100%;background-position:top left;border: 1px solid #D8D1AD;text-indent:-10em;overflow:hidden;}/* 詳細度[0,0,1,4] */
div.nav ul li a:hover{background-position:0px -80px;}/* 詳細度[0,0,2,4] */

なお、画像はこの場合ひとつにしたほうがスマートでしょう。左からの位置を指定する。また、CSS2.1に対応した新しいブラウザのみ対象とするなら、liの背景指定は不要になります。

回答No.1

hinananana

まず、サンプルのhead内に
<link type="text/css" rel="stylesheet" href="css/test.css" />
↑を入れましょう。

画像の表示ですが
各リストのidの#を消してください

<li id="#visamadhi"><a href="">Visamadhiとは</a></li>
↓
<li id="visamadhi"><a href="">Visamadhiとは</a></li>

これで画像が表示されます。

で、真ん中の画像が表示されないと思いますが
画像の名前が間違えているので、書き直したらOKです。