How to make overlap tab effect, without using image?

Question

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

This is HTML code

<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 example here : http://jsbin.com/owana4

But i need to achieve this conditions too . Selected tab should overlap on second level tap.

How to make this possible without using image or JavaScript?

Answer 1

Try a negative margin-left on item 2 and giving item 1 a higher z-index then the other tabs.

Answer 2

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

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).

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

Answer 3

1. The code, in the question above, has class="tabitemscontainer1" but the CSS has #tabitemscontainer1 instead.

   Change all the CSS selectors to .tabitemscontainer1.

2. Next since ul.level2 is positioned absolutely, add: z-index: -1; to its CSS.

3. Add:

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

4. Change .tabitemscontainer1 > li to:

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

5. Adjust the top in ul.level2s CSS to line up the borders.