ウェブサイト：グローバルナビのドロップダウンメニュー作成について

ezorisu-web　CSSでドロップダウンメニュー
http://ezorisu-web.com/web-design/archives/356

のサンプルを使用させていただき、ドロップダウン付グローバルナビゲーションをカスタマイズしていたところ、壁に当たってしまったので質問させてください。

上記サイトのサンプルどおりに作成したメニューはきちんと動きましたが、今回は添付データの画像のように、初期状態で見えている「一段目のメニュー」のみ画像を使用したいのです。
一段目のメニューにマウスオンで画像ロールオーバー＆上記リンク先サンプルのようにドロップダウンメニュー表示、という動作をさせたいと思っています。

一段目用の画像は、形が不定形で背景にも模様が入っているため、透過PNGを使用しております。
文字も画像化して統合してあります。
今回はIE6にも対応する必要があるため、
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/
にて配布している「DD_belatedPNG.js」を導入しました。
また、CSSを使い、背景をスライドさせて実現させるタイプのロールオーバー処理を施してあります。
http://www.1uphp.com/con2/over/over3.html
を参考に、画像は１枚絵にせずメニュー名別に分割してあります。
ここのリスト化とロールオーバーまではきちんと動きました。

ただ、これを組み合わせると挙動がおかしくなります。
一番上のリンク先のサンプルを基に一段目に背景画像を設定すると、二段目に背景画像が継承されてしまい、思うように表示されません。
添付画像のような動きを実現させるには、どのようなソースを書けば良いでしょうか。
分かりにくい点があるかと思いますが、必要事項あれば追記しますので、よろしくお願いいたします。

No.2 ベストアンサー 回答者： mazimekko3 回答日時： 2010/01/14 23:03

http://www.1uphp.com/con2/over/over3.html
:hover 擬似クラスの対象が a になってるから, a からカーソルが外れたときにロールオーバーの効果が消える.

現在ロールオーバーを設定するセレクタは,
li > a:hover
だろうけど,
li:hover > a
とかにするといい. この設定では 子のリストにカーソルが重なっていてもロールオーバー効果は持続する.

ただし IE はバージョンによって :hover 擬似クラスを a にしか使えなかったり, 直系指定の ">" が使えない.

それと ">" は優先度が高くなるから css の設定を見直す必要が出たりするから注意.

この回答へのお礼

恥ずかしながら、a 要素以外に :hover を使うという発想がなく、目から鱗でした。まだまだ勉強不足です。
おっしゃるとおり li に設定することで、思ったとおりの動きが実現できました＠Firefox、Safari

IEでのバージョン別の挙動については、後ほど環境を確保して別途調整してみます。
ありがとうございました。

お礼日時：2010/01/15 12:11

No.1 回答者： mazimekko3 回答日時： 2010/01/14 17:43

http://ezorisu-web.com/web-design/archives/356
に示されてるコードだと ul と li の ネスト構造が分かりづらいのだけれど, ul は li の子要素として出現する構造になる.

一段目 li に背景として画像を設定すると, background はデフォルト継承だから背景画像とか背景色は子要素の ul にもすべて適用される.
継承させたくないなら, 明示的に背景関連のプロパティを設定しないといけない.

具体的に何をすればよいかといえば, 二段目以降の li もしくは ul の background に継承をさせない指定をする.
#menu-sample li li {
background: 色とか;
}

色しか指定しなくても, 親の background をすべて消す必要があるから background の指定が必要.
idは最初に示してあるURLのコードにならっている.

この回答への補足

ご回答ありがとうございます。
二段目以降にも画像が表示されてしまう件、二段目の背景画像を background-image:none; でリセットした後に設定し直す事で解決しました。
他にも多少問題がありましたが、継承関係を洗い直す事で解決しました。ありがとうございます。

質問に質問を重ねてしまう形になり恐縮ですが、もう一つよろしいでしょうか？
質問文のとおり、一段目には
http://www.1uphp.com/con2/over/over3.html
を参考にロールオーバーを設定しているのですが、カーソルを二段目に移した瞬間に一段目がデフォルト状態に戻ってしまうのが少し気になりました。
カーソルが二段目に移った際にロールオーバー状態を維持し、一段目もしくは二段目から外れた際にデフォルトに戻す方法はあるのでしょうか。
もし何か方法があれば試したいと思います。よろしくお願いいたします。

補足日時：2010/01/14 20:21