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

Question

我有一个<li>元素，其中包含一个无序列表。当用户将鼠标悬停在父元素<li>上时，将显示无序列表。最近在<li>和子元素<ul>中添加了一个加边，而<li>没有下边框。我想隐藏<li>底部后面的子无序列表顶部边界，以便它将切断该部分无序列表的边界。

这里是我创建了一个小提琴 - http://jsfiddle.net/EZRU9/3/

请注意，这是接近原始的实现。我试图改变父母<li>有绝对的位置，但没有奏效，我把它改回来。当我尝试过时，我可能做了一些其他的错误，但自从我改回它之后，我创建了一个小提琴来模仿我现在拥有的东西。

Answer 1

你不能把父母放在带有z索引的孩子面前。我在这种情况下的建议是：在<li>内添加一个额外的元素，给它position: absolute;和一个与您的背景颜色相匹配的颜色，然后将其置于<ul>边框的一部分。

Answer 2

将顶级文本（“选项卡1”）包裹在您选择的范围或其他标签中。然后你可以根据需要设计风格和堆叠。