【CSS】list要素の画像メニュー

質問

CSSのlist要素で画像を横並べのロールオーバーにしたいので、本に載っているようにしてみましたが、
このようなCSSにしてしまうと、ページ全体のA要素に背景画像が付いてしまいます。

ul { width: 772px; list-style: none; }
li,a { display: block; width: 193px; height: 38px; }
li { float: left; textindent: -9999px; }
a { text-decoration:none; background: url(画像URL) no-repeat;
overflow: hidden; }
#navi1 a { background-position: 0px 0px; }
#navi2 a { background-position: -193px 0px; }
#navi3 a { background-position: -386px 0px; }
#navi4 a { background-position: -579px 0px; }
#navi1 a:hover { background-position: 0px -38px; }
#navi2 a:hover { background-position: -193px -38px; }
#navi3 a:hover { background-position: -386px -38px; }
#navi3 a:hover { background-position: -579px -38px; }

全体のA要素は普通にしたいのですが、どのように改善すればよろしいでしょうか？
初歩的な質問で申し訳ありませんが、よろしくお願いいたします。

回答No.1

Seravy · ベストアンサー

とりあえず、
a { text-decoration:none; background: url(画像URL) no-repeat;
overflow: hidden; }
の部分により、すべてのaタグが指定されているので、例えばそのロールオーバーを含むブロックのidがnavigationなら

#navigation a { ...

のように指定しましょう。

お礼

素早く、かつ適切なご回答ありがとうございます。

ブロックを作っていませんでした。メニュー専用のブロックを作り、そのブロックのみにA要素を適用させればよいのですね。

大変分りやすい説明でした。心より感謝いたします。

回答No.2

ICHI-yan

無駄なブロックは作っちゃダメ。
ul もブロック要素ですよ。

つまり、たぶん（ html 部の記述がないのでたぶんです）
li a{
とでもすれば、li の中の a にだけ効きます。そこだけが特別なリストなら、ul にクラス名をつければＯＫ

お礼

li a{.......}

のような記述はしていませんでした。そのような考えがありましたね。ご回答、まことにありがとうございます。
最終的には、ul にクラス名をつけることにします。結構難しい技術で、まだ完成していませんが、色々とトライしてみようと思います。

適切なご回答、ありがとうございました。