3 navigation tabs within another tab...?

[claes]

Hi everybody,
I've been searching the web for some hints of how to build something as described below. If anyone has came across something similar I'd appreciate a hint.

Today I have a tabbed navigation like this: Please see attachment "tabs.gif"
I want to create something like attachment "tabs2.gif".
The new "overlaying tab" needs to adjust its width when the (dynamic) names of the bottom tabs change.

Today's html:

<div id="primary_tabs_bg">
<ul id="primary_tabs">
  <li>
    <span class="text"><a href="#">First tab...</a></span>
  </li>
  <li class="active">
    <span class="text"><a href="#">Tab 2</a></span>
  </li>
  <li class="plugin">
    <span class="text"><a href="#">Plugin</a></span>
  </li>
  <li>
    <span class="text"><a href="#">Tab 3</a></span>
  </li>
  <li>
    <span class="text"><a href="#">Tab4</a></span>                  
  </li>		   
</ul>
</div>

Today's CSS:

#primary_tabs_bg {
background:url("../images/common/bg_primary_tabs.gif") repeat-x; 
height:45px; 
margin:6px 0px 3px 0px;
padding:0px 0px 0px 223px;}

ul#primary_tabs {
margin:0px; 
padding:17px 0px 0px 0px;
list-style:none;}

ul#primary_tabs li {
float:left; 
width:auto; 
margin:0px 0px 0px 20px;
font-weight:bold;}

ul#primary_tabs .text {
display:block;
padding:6px 12px 5px 16px;
margin:0px 5px 0px 0px; 
font-size:110%; 
font-weight:bold;}

ul#primary_tabs li {
background:url("../images/common/tab_off_right.gif") no-repeat right top;}

ul#primary_tabs li .text {
background:url("../images/common/tab_off_left.gif") no-repeat left top;}

ul#primary_tabs li.active {
background:url("../images/common/tab_on_right.gif") no-repeat right top;}

ul#primary_tabs li.active .text {
background:url("../images/common/tab_on_left.gif") no-repeat left top;}

ul#primary_tabs li.plugin {
background:url("../images/common/tab_plug_off_right.gif") no-repeat right 8px; margin-left:0px; padding-top:8px;}

ul#primary_tabs li.plugin .text {
background:url("../images/common/tab_plug_off_left.gif") no-repeat left top; padding:2px 6px 5px 11px; font-size:95%;}

ul#primary_tabs li.plugin_active {
background:url("../images/common/tab_plug_on_right.gif") no-repeat right 8px; margin-left:0px; padding-top:8px;}

ul#primary_tabs li.plugin_active .text {
background:url("../images/common/tab_plug_on_left.gif") no-repeat left top; padding:2px 6px 5px 11px; font-size:95%;}

ul#primary_tabs li a {color:#333; text-decoration:none;}

ul#primary_tabs li.active a,
ul#primary_tabs li.plugin_active a {color:#a13d00; text-decoration:none;}

ul#primary_tabs li a:hover {color:#a13d00; text-decoration:underline;}

ul#primary_tabs li.active a:hover,
ul#primary_tabs li.plugin_active a:hover {text-decoration:none;}

Has anyone came across a need for this or seen something like it?
Any comments appreciated!

Thanks!
/Claes