メニューボタンのliマークアップでのヒントをください。

質問

このソースの<a>の場所について見ておいて頂けますか。

【HTML内】
<ul>
<li id="item12"><a href="#">アイテム１２
<ul>
<li>看板全般</li>
<li>ネオンライト</li>
<li>店舗用看板</li>
<li>メニュー看板</li>
<li>シート看板</li>
</ul>
　　　　　　　　　　　　　　</a></li>
</ul>

上記のボタンメニュー（複数がまとまったタイプ）の表示をするために、複数項目が一枚になった画像を使って<li>にa:hoveを使ったbackgraundの表示をしようと思いました。
それで後先考えず、ＣＳＳまで作ってしまい、バリデータを後からかけたら、<a>にはさまれた<ul><li>でひっかかってしまい、これはまずいと、もういちど、作りなおそうかと考え直しましたが、
よく考えると、このマークアップの形は保持して検索エンジンにはじかれないようにしたいが、<a>をどう入れていけばいいか？<img>タグは使いたくはないので、この形を利用して、<li>の中に”アイテム１２
・看板全般・ネオンライト・～とまとめていれてしまおうかと思いましたが、どうしても妥協しているようですし、バリデータでひっかからないといえ、何のための<li>をこんな使い方にしなければいけないのか、逆にそれが、ロボットにはじかれてしまいかねないかなと不安で迷っております。

私のようなケースの場合、皆さまでしたらどうするのか、なにか良いヒントでも与えて頂けると幸いです。
宜しくお願いします。

回答No.1

yambejp · ベストアンサー

この場合のアンカーをつかったhover処理は構造的に無理がありますね。
IEを無視してよいならULに対するhoverで事足りると思いますが。

どうしてもこの機能が必要ということであれば、
javascriptのonmouseroverで処理するのが妥当だと思います。

お礼

yambejpさま>>

アドバイスありがとうございました。
さっそくjavascriptのonmouseroverを使ってみようと思いました。

ありがとうございました。