Question

如何仅使用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>

我写了这个CSS

#tabcontainer {
height:62px;
position:relative;}

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

#tabcontainer ul li li.selected a, #tabitemscontainer1 > li.selected > a {
color:#AE4329;
font-weight:bold;}

ul.level2 {
background:none repeat scroll 0 0 #F3F8C6;
border:1px solid #EABF4A;
left:0;
padding:6px;
position:absolute;
top:26px;
width:463px;}

#tabcontainer ul li li {
float:left;
padding:0 15px 0 4px;}

并且几乎可以

我在此处添加了示例：http://jsbin.com/owana4

alt text http://shup.com/Shup/374240/110619042-My-Desktop.png

但我也需要达到这个条件。选定的标签应在第二级点击时重叠。

如何在不使用图片或JavaScript的情况下实现这一目标？

alt text http://shup.com/Shup/374241/110619313-My-Desktop.png

Answer 1

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

li.selected {border-bottom-color：＃F3F8C6; border-bottom-width：1px; } ul.level2 {margin-top：-1px; }

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

请注意，您只需更改现有CSS中的border-width值，而不是border-bottom-width。

Answer 2

在第2项上尝试使用负边距，并为第1项提供比其他标签更高的z-index。

Answer 3

上述问题中的代码有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;
}

调整top CSS中的ul.level2以排列边框。

如何在不使用图像的情况下制作重叠标签效果？

3 个答案: