與Z-index有關的CSS菜單/子菜單問題

Question

我的導航欄CSS出現問題。 我希望它看起來像： http : //i39.tinypic.com/28is4uw.png

但這就是我得到的： http : //i40.tinypic.com/akecl5.png

使我像這樣工作的唯一方法是使用：

.under-menu { position: relative;  z-index:999; }

但這會殺死submenu links 。

非常感謝！

Answer 1

這不是一個完美的解決方案，但是如果我們要支持IE，至少要解決一些問題，如果不只是添加

pointer-events: none;

將解決問題。 該演示不包括指針事件。

這是一個演示： CSSDesk

總而言之，我在下拉菜單中添加了波浪背景（在鏈接和下拉菜單ul所在的li中），第二次嘗試的效果幾乎相同，唯一的不同是遮蓋了下拉菜單的頂部向下添加我在LI中添加的背景。 您將看到wave背景陰影變成了行情指示器，因為其他背景仍然存在（您可以使用JS隱藏它，然后它會變得更好，但是由於這只是一個html / css主題，因此我沒有添加任何JS）

因此，當您將鼠標懸停在LI元素上時，將顯示覆蓋背景。 因此，應該為每個帶下拉菜單的疊加背景添加背景。 （就像我說的不是完美的解決方案）