如何使重叠标签效果，而不使用图像？ [英] How to make overlap tab effect, without using image?

问题描述

如何使用CSS仅在第二级标签上重叠所选标签？

How to overlap selected tab over 2nd level tab using css only?

这是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

I added example here : http://jsbin.com/owana4

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

但我需要实现条件。

如何在不使用图片或JavaScript的情况下实现此功能？

How to make this possible without using image or JavaScript?

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

推荐答案

尝试将ul.level2向上拉1像素，

Try pulling ul.level2 up 1 pixel with a negative margin, and changing the color of the bottom border on the selected level 1 tab to the background color.

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

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

如果最终无法正常工作，您可能需要调整z-index或向底部添加一些填充。 （Padding，因为彼此对接的两个边缘将被视为一个边缘，其值等于较大的边缘）。

If that ends up not working, you may need to adjust z-indexes or add some padding to the bottom to one of those elements. (Padding because two margins that butt up against each other will be treated as one margin with a value equal to the larger one).

请注意，宽度，您可以只更改现有CSS中的border-width值。

Note that instead of border-bottom-width, you could just change the border-width value in your existing CSS.

这篇关于如何使重叠标签效果，而不使用图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！