CSS divが重複し、その下にマウスイベントが認識されない

Question

メニューを含むウェブページヘッドを作成しています。メニューの背景色はヘッドの背景色とは異なり、フル・ヘッドに希望のボックス・シャドーを付けるために、parent-divの全領域を塗りつぶしたchild-divを作成し、ボックス・シャドーを追加しましたそれに。

問題は、上にdivがあるため、マウスイベントが認識されなくなることです。どうすれば私はまだホバーしてメニューをクリックすることができますか？

http://jsfiddle.net/5u9yy/1/からhttp://jsfiddle.net/5u9yy/13/

PS：私は非常にHTMLとCSSレイアウトを改善する方法のヒントを感謝しています。
PS 2：奇妙、それは... Firefoxの自身に火格子を見えたが、JSFiddleでいくつかの問題が表示され、それに巻き付け（ULの高さ、ヘッド幅）

編集：追加、更新ペースト ulは、デモの目的を明確にするために透過的ではありません。ボックスシャドーは、ulの上にレンダリングする必要があります。

ソリューション（TheWaxManのおかげで）：
代わりのインセットボックスシャドウを追加するすべての上のdiv を追加し、我々はulにボックスシャドウを与えることができます。効果を正しく取得するには、追加のパラメータをボックスのシャドウプロパティに配置します。このパラメータは、要素の内側にオフにして、それに応じてボックスのシャドウを下に移動します。

/*   mode offset-x offset-y blur offset-inner color */ 
box-shadow: inset 0  10px  10px -10px  #000; 

Answer 1

これを更新しました。これを見てくださいfiddle z-indexプロパティは位置が設定されている場合にのみ機能するため、ulに相対位置を設定しました。次に、ulのz-indexを2に設定し、divの値を1に設定してulの後ろにレンダリングします。

編集：私はCSSにいくつか変更を加えました。それが立っているので、追加の4行が追加されています。 position & ulのz-index、divのliおよびz-indexのボックスシャドウ。それは今、リンクへのdivブレンドからのボックスの影のように見えます。最初の解決策よりやや難しいですが、うまくいきます。

Answer 2

ニースが見ています。

私がしたことは、divを入れ子にして、それらをネストするのではなく、もう一方の上に配置することです。これは、絶対位置付けを行うよりもきれいです。

変更されたheadOverallは、メニューの「コンテナ」をソートし、相対的な位置に変更し、ボイルを変更しました。

http://jsfiddle.net/xnJQ9/