css - 父子重叠以创建选项卡样式效果

Question

我有一个现有的基于 CSS 的下拉菜单。我想通过将绝对定位的子元素的边框与父元素上的白色底边框重叠来创建选项卡样式效果:

----------------------
| Parent  | Parent 2 |
|          -----------------|
| Child content             |
-----------------------------

是否可以通过相应地设置 z-index 来实现？我无法正常工作。

请参阅此 fiddle :http://jsfiddle.net/huo1rfL4/2/

Answer 1

DEMO

<ul>
    <li>Entry

    </li>
    <div class="sub">

        </div>
</ul>

ul{position:relative;}

ul li
{
    display: inline;
    border-top: 1px solid #434343;
        border-right: 1px solid #434343;
        border-left: 1px solid #434343;
    border-bottom: 0px solid #ffffff;
        z-index:200;
        background:yellow;
    position: absolute;
}

.sub
{
    position: absolute;
    background-color: yellow;
    border: 1px solid #434343;
     border-top: 1px solid #434343;
    width: 200px;
    height: 200px;
    margin-top: -2px;
    top:20px;
    z-index: 1;
}