影付きのヘッダー ストリップがあり、ナビゲーション リンクが含まれています。それらにカーソルを合わせると、サブメニューが表示されます。
サブメニューをヘッダー ストリップの後ろのレイヤーに表示するにはどうすればよいですか? サブメニューの上にキャストするには、ヘッダーのボックスの影が必要です。
現在、サブメニュー ( .main-navigation li ul) の z-index はヘッダー ストリップ ( .site-header) よりも低くなっていますが、これは効果がありません。負の z-index を指定しようとしましたが、これによりコンテンツの背後に配置され (したがって非表示になり)、リンクが機能しなくなります。これは一般的な問題であると読んだので、負の z-index の使用は避けたい索引。
お役に立てれば幸いです。
この場合、要素のスタック コンテキストのため、Z-index は解決策ではない可能性があります。HTML の順序を変更せずに、サブメニューに関連付けられた疑似要素で box-shadow を使用してこのトリックを試すことができます。例えば：
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
このデモを確認してください。同じ効果を実現する方法は他にもある可能性が高いため、これは考えられる解決策の 1 つにすぎないことに注意してください。
テキスト コンテンツは、隣接する兄弟要素であり、html のヘッダーの後に並べられるため、ヘッダーの影の背後に自然に表示されるはずです。(これを示すために、デモのコンテンツ div に背景画像を追加しました。)