Css 如何使重叠选项卡效果，而不使用图像？

如何仅使用css将所选选项卡与第二级选项卡重叠

这是HTML代码

<div class="tabcontainer" id="tabcontainer">
    <ul id="tabitemscontainer1">
          <li class="selected"><a href="#">item 1</a>
             <ul class="level2">
                <li><a href="#">sub item 1 </a></li>
                <li> <a href="#">subitem 2</a></li>
             </ul>
          </li>
          <li><a href="#">item2</a></li>
      </ul>
</div>

然后就差不多好了

我在这里添加了示例：

但我也需要达到这个条件。所选选项卡应在第二级点击时重叠

如何在不使用图像或JavaScript的情况下实现这一点

---

尝试在项目2上留下一个负边距，并给项目1一个比其他选项卡更高的z索引。

尝试将ul.level2向上拉一个带有负边距的像素，并将所选级别1选项卡上的下边框颜色更改为背景色

li.selected{边框底部颜色：#F3F8C6；边框底部宽度：1px；} ul.level2{页边距顶部：-1px；}

如果这最终不起作用，您可能需要调整z索引或在其中一个元素的底部添加一些填充。（填充，因为相互对接的两个边距将被视为一个边距，其值等于较大的边距）

请注意，您可以只更改现有CSS中的边框宽度值，而不是边框底部宽度

上述问题中的代码具有

class=“tabitemscontainer1”

，而CSS具有

#tabitemscontainer1

将所有CSS选择器更改为

.tabitemscontainer1

接下来，由于

ul.level2

绝对定位，添加：

z-index:-1到它的CSS

加：

.tabitemscontainer1 > li.selected
{
  border-bottom: none;
}

将

.tabitemscontainer1>li

更改为：

.tabitemscontainer1 > li
{
  -moz-border-radius:   7px 7px 0 0;
  background:           none repeat scroll 0 0 #F0F7C1;
  float:                left;
  margin-right:         2px;
  padding:              5px 10px 10px;
  border:               1px solid #EABF4A;
}

调整

ul.level2

s CSS中的

top

，以对齐边框

---

但是我没有在任何项目上使用z-index。在屏幕截图中，选择了“项目1”。thx作为答案，但它不起作用，在何处添加z-index？您可以使用z-index和将覆盖基础内容的背景。看看我对一个类似问题的回答：如果我将

z-index:-1

添加到

ul.level2

中，它完全没有显示出来，这就是发布不完整代码的缺点。基于Q的代码，它应该可以工作（在我的测试中也可以）。请链接到该页面。或者至少粘贴一个完整的快照。@metal-gear-solid：当我浏览该示例并设置

z-level:-1使用Firebug，它的行为就像它应该做的一样，并且不会消失。当您查看时会发生什么情况：？现在很好，如何获得此条件@metal gear solid:您的意思是选择其中一个子菜单项（class=“level2”）时？您可以将类“selected”添加到它所在的
中，然后为
#tabcontainer ul.level2 li.selected a添加样式。见：
.tabitemscontainer1 > li
{
  -moz-border-radius:   7px 7px 0 0;
  background:           none repeat scroll 0 0 #F0F7C1;
  float:                left;
  margin-right:         2px;
  padding:              5px 10px 10px;
  border:               1px solid #EABF4A;
}