CSS layout problem: tabs should overlap the frame - html

Question

I'm working on a template like this:
The as you can see the frame (3) has a glassy border which goes behind the tabs (1,2). But I don't know how to do this layout in CSS. I searched stackoverflow and found the following threads, but they didn't help:
https://stackoverflow.com/questions/6649360/how-to-overlap-put-a-frame-layout-from-top-border-of-an-imageview
CSS problem, creating tabs
The HTML code is something like this:
<div id="frame">
<nav>
<ul id="topnav">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
<li>Tab7</li>
</ul>
</nav>
</div>

Answer 1

Try This
HTML :
<div id="frame">
<ul>
<li>Tab 01</li>
<li>Tab 02</li>
<li>Tab 03</li>
<li>Tab 04</li>
</ul>
</div>
<div id="frame2">Frame 02</div>
CSS :
#frame,#frame ul
{ height:30px;
background:#f0f0f0;
}
#frame ul li
{ height:30px;
float:left;
padding-right:2px;
}
#frame ul li a
{ position:relative;
height:30px;
display:block;
float:left; /* for IE6 bug */
background-color:#f00;
left:0;
top:0;
padding:0 4px;
color:#fff;
}
#frame ul li a:hover,#frame ul li a.active
{ height:40px;
}
#frame2
{ border:#000 1px solid;
padding:10px;
}
Please Check JSFIDDLE for Reference

Answer 2

I think you are looking for the z-index. An element with a higher z-index will appear above another element with a lower z-index. you can use something like this:
.tabSelected {
z-index: 99;
}

Answer 3

I would suggest having a look at jquery-ui which provides an example on the site of a tabbed element such as this, you can modify the design using the theme roller on the site to get the colours you want.
jquery ui tabs

Answer 4

If you're using CSS3, you could try using RGBA for the background colour of the frame - here's a couple of links:
SO question/answer
CSS Tricks article
RGBA will allow the divs to be slightly transparent while keeping the contents visible - just make sure the frame is slightly larger than the contents (so it can be seen) and set the background colour to match the glass effect.