html - 如何将子元素重叠在父元素上

Question

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

这是我创建的小提琴 - http://jsfiddle.net/EZRU9/3/

请注意，这接近于原始实现。我尝试将父级更改<li>为具有绝对位置，但这不起作用，我将其更改回来。当我尝试这样做时，我可能做错了其他事情，但由于我将其改回，我创建了小提琴来模仿我目前拥有的东西。

Answer 1

您不能使用 z-indexes 将父级放在子级前面。在这种情况下，我的建议是：在 中添加一个额外的元素<li>，给它position: absolute;和一个与你匹配的背景颜色，然后将其定位为覆盖部分<ul>边框。

Answer 2

将顶级文本（'Tab 1'）包裹在您选择的跨度或其他标签中。然后，您可以根据需要设置样式和堆叠。