如何在父元素上覆蓋子元素

Question

我有一個<li>元素，其中包含一個無序列表。當用戶將鼠標懸停在父元素<li>上時，將顯示無序列表。最近在<li>和子元素<ul>中添加了一個加邊，而<li>沒有下邊框。我想隱藏<li>底部後面的子無序列表頂部邊界，以便它將切斷該部分無序列表的邊界。

這裏是我創建了一個小提琴 - http://jsfiddle.net/EZRU9/3/

請注意，這是接近原始的實現。我試圖改變父母<li>有絕對的位置，但沒有奏效，我把它改回來。當我嘗試過時，我可能做了一些其他的錯誤，但自從我改回它之後，我創建了一個小提琴來模仿我現在擁有的東西。

Answer 1

你不能把父母放在帶有z索引的孩子面前。我在這種情況下的建議是：在<li>內添加一個額外的元素，給它position: absolute;和一個與您的背景顏色相匹配的顏色，然後將其置於<ul>邊框的一部分。

Answer 2

將頂級文本（「選項卡1」）包裹在您選擇的範圍或其他標籤中。然後你可以根據需要設計風格和堆疊。