メニューのロールオーバーについて

質問

メニューボタンをロールオーバーさせようと思った時
現在の主流テクニックはどのような方法なのでしょう？

一時期cssで背景画像を変える方法が流行りましたが、
text-indent; -9999pxを使って文字を消すようなやり方は
もう古い（意味がない）でしょうか。
素直に画像を埋め込んで使おうかなーとも思っています。

そうすると、Javascriptを使うやり方が無難でしょうか？
cssを使うなら、ロールオーバーで、透明画像をかぶせるのもいいかな？とか考えていますが。

ご意見お聞かせくださいませ。

回答No.1

noname#66720

個人的なオススメになりますが、display:list-item;を使うのが良いと思います。
例えば200×100の画像を表示しようとすると。

<p><span>ああああ</span></p>

p {
width:200px;
height:100px;
overflow:hidden;
}

span {
display:list-item;
list-style:url(#) inside;
}

こんな感じで。
多少応用は必要で、かつIE5.5以下は切り捨てることになりますが、できないこともないです。

とくにこだわらない場合はJavascriptで十分だと思いますが。

お礼

この場合リストに背景画像をつけるってことでしょうか？
ロールオーバーはどのようにされるのでしょうか？

display:list-item;をお勧めとのことですが
私はメニューを作る時は<li>を使って作っています。
<p><span>ああああ</span></p>でわざわざdisplay:list-item;を設定しなくてもいいと思うのですが…。