How to make a blending effect without using an image?

Question

How to overlap selected tab on second level tab using only css?

This is the 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>

I wrote this 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;}

and get almost ok

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

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

But I also need to achieve these conditions. The selected tab should overlap at the edge of the second level.

How to make this possible without using image or 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- . (, , , , ).

, border-bottom-width CSS.

Answer 2

margin-left item 2 1 z-, .

Answer 3

• The code in the question above does class="tabitemscontainer1", but CSS does #tabitemscontainer1.

  Change all CSS selectors to .tabitemscontainer1.

• Further, since it is ul.level2positioned absolutely, add: z-index: -1;to your CSS.

• Add

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

• Change .tabitemscontainer1 > lito:

  .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;
  }
  

• Adjust topin ul.level2CSS to align the borders.