0

コードについてはこちらをご覧ください:http://jsfiddle.net/9pezn/

ボトムボーダーでポジションボトム、ネガティブマージントリックを実行して、ホバー/アクティブな「タブ」z-indexを作成する方法を知っていますが、ボックスシャドウを使用するとこの効果を再現できませんでした。何か案は?

IEメインのナビゲーションタブをボックスシャドウの上に配置したい!私は基本的に、Nike.comのナビゲーションが行うことを再現しようとしています。たとえば、「スポーツ」にカーソルを合わせると、下の影が覆われます。

前もって感謝します!

ここに画像の説明を入力してください

4

2 に答える 2

0

z-indexあなたの友だちです。

第1レベルのナビゲーションをz-index:1に設定してから第2レベルのナビゲーションをに設定すると、第1レベルのナビゲーションz-index:2の上部に配置されbox-shadowます。

簡単に言えば、ナイキは一連の巧妙に積み重ねられた画像でそれを行いました。次の2つの理由から、ネイティブのボックスシャドウの実装でこれを実行できるとは思いません。

1)box-shadowは要素のz-indexに関連付けられています。つまり、nav1 box-shadowをnav2とオーバーラップさせずに、nav1の子をnav2の子の上に引っ張ることはできません。

2)それを回避する方法を見つけた場合(おそらく、コンテナ全体ではなく、各ナビゲーション「タブ」に個別のボックスシャドウを適用することによって)、シャドウがわずかに重なり、暗いスポットが発生します。

私が見逃している解決策がある可能性がありますが、これはおそらく私がタオルを投げて代わりに画像を使用するケースの1つです。

于 2012-07-06T16:43:22.893 に答える
0

私は解決したいと思っている解決策を見つけました:http://jsfiddle.net/LVppY/

スコット、あなたはそれがz-indexでできるという正しい軌道に乗っていました

于 2012-07-07T09:57:02.763 に答える