CSS div重疊，鼠標事件在其下面不被識別

我正在創建一個包含菜單的網頁頭。菜單的背景顏色與頭部的背景顏色不同，爲了讓所需的盒子陰影完整，我創建了一個填充父div的整個區域的子div，並添加了box-shadow到它。CSS 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一個盒子陰影。爲了得到正確的效果，在box shadow屬性中添加一個額外的參數，將其偏移到元素的內部，並相應地將box陰影向下移動。

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

2012-03-09 Niklas R

我已經爲你更新了這個。請看這fiddle我已經設置了位置：ul上的相對位置，因爲z-index屬性僅在位置設置時才起作用。然後，我將ul的z-index設置爲2，將div的z-index設置爲1，以便將它顯示在ul後面。

編輯：我做了幾個更改的CSS。就目前而言，增加了4條額外的線。位置& z-index上的ul，box-shadow和div上的z-index。它現在看起來像div的盒子陰影混合到鏈接中。稍微比第一個解決方案更混亂，但它的工作原理。

2012-03-09 22:30:10 Andrew

對他的代碼的最小改變量+1。 – 2012-03-09 22:34:53

我總是想知道爲什麼'z-index'的設置不總是有效，謝謝。 xD無論如何，這確實解決了事件，但這樣我就不需要'

'。使用'z-index'在'ul'背後渲染box-shadow。 *設置ul的背景顏色不太透明，以便更清晰地看到效果* – 2012-03-09 22:45:15

我明白了。你有沒有嘗試在李的內部添加一個箱子陰影？看看這個，看看你的想法：[小提琴]（http://jsfiddle.net/TheWaxMann/5u9yy/14/） – Andrew 2012-03-09 22:57:15

好看。

我所做的只是對div進行一些洗牌來嵌套它們，而不是讓它們位於另一個的頂部。這比絕對定位更清潔。

改變headOverall菜單stuffs的「容器」，改變它的位置相對，瞧。

2012-03-09 22:32:38

感謝您的幫助，但是與上面相同。它可能不是很明顯，但箱形陰影仍然在'ul'後面呈現。我認爲...應該增加用於示範目的的半透明度;） – 2012-03-09 22:51:11

回答