Create tabbed rectangle with CSS - css

Question

Is anybody aware of any CSS tricks that can achieve the tabbed rectangle look as shown in the image below.
Obviously this cannot be achieved using one div, however, can anybody come up with a better method than overlapping one div over another to make a gap in the border?
This is my current solution, but I feel it could be better:
HTML:
<div id="handle"></div>
<div id="menu"></div>
CSS (Have ignored colors and positioning etc):
#handle {
width: 90px;
height: 20px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
#menu {
width: 600px;
height: 100px;
border: 1px solid #666;
margin-top: 19px; /* Notice it is one pixel higher then the bottom of the #handle, this covers the top border where the handle is */
}
Please do not correct the above CSS if there are mistakes, I have not tested this. It is purely to show my current method of achieving this
Any comments much appreciated
UPDATE
This is the HTML for the menu as it stands:
<nav id="global-nav">
<ul>
<li id="homNav"></li>
<li id="masNav">#
<!-- This is where the submenu starts -->
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
<!-- This is where the submenu ends -->
</li>
<li id="shiNav">#
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="repNav">#
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="setNav">#
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
</ul>
</nav>
This is the CSS for the menu as it stands (I have not included the sub menu css yet):
/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}
#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;cursor:pointer;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}
/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}
/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}

Answer 1

After having a good look at this I concluded that my original method of overlaying the border was the best way to achieve this tabbed menu.
HTML:
<nav id="global-nav">
<ul>
<li id="homNav"></li>
<li id="masNav">#
<div class="subMenuHandle horizontal-sprite">
<div class="bg-noise"></div>
</div>
<div class="subMenu horizontal-sprite">
<div class="bg-noise"></div>
</div>
</li>
<li id="shiNav">#
<div class="subMenuHandle horizontal-sprite">
<div class="bg-noise"></div>
</div>
<div class="subMenu horizontal-sprite">
<div class="bg-noise"></div>
</div>
</li>
<li id="repNav">#
<div class="subMenuHandle horizontal-sprite">
<div class="bg-noise"></div>
</div>
<div class="subMenu horizontal-sprite">
<div class="bg-noise"></div>
</div>
</li>
<li id="setNav">#
<div class="subMenuHandle horizontal-sprite">
<div class="bg-noise"></div>
</div>
<div class="subMenu horizontal-sprite">
<div class="bg-noise"></div>
</div>
</li>
</ul>
</nav>
CSS (Sorry for the compression, just my way of formatting):
/* Navigation */
#global-nav {position:absolute;width:460px;height:27px;left:15px;top:43px;}
#global-nav ul {margin:0;padding:0;list-style-type:none;}
#global-nav ul li {position:relative;display:block;width:92px;height:27px;float:left;padding:0;margin-left:8px;z-index:10;background-image:url("http://beta.example.net/_images/_global/sprite.png");background-position:-173px -32px;}
#global-nav ul li:hover {background-position:-173px -59px;}
#global-nav ul li:active {background-position:-173px -86px;}
#global-nav ul li a {display:block;width:92px;height:27px;line-height:27px;text-align:center;color:#fff;font-size:12px;text-shadow:#666 0 -1px 0;}
#global-nav ul li:hover a {color:#666;text-shadow:#fff 0 1px 0;}
#global-nav ul li:active a {color:#666;text-shadow:none;}
/* Set styles for specific navigation buttons */
#homNav {width:47px !important;margin-left:0 !important;margin-right:12px;background-position:-126px -32px !important;}
#homNav a {width:47px !important;}
#homNav:hover {background-position:-126px -59px !important;}
#homNav:active {background-position:-126px -86px !important;}
/* Set hovers of sub menu buttons to active images */
#masNav:hover,
#shiNav:hover,
#repNav:hover,
#setNav:hover
{background-position:-173px -86px !important;}
/* Set the sub menu handles */
#global-nav .subMenuHandle {position:relative;display:none;width:90px;height:12px;margin-top:-1px;border-left:1px solid #666;border-right:1px solid #666;z-index:1000;background-color:#fff;background-repeat:repeat-x;}
/* Set the sub menu container */
#global-nav .subMenu {position:relative;display:none;margin-top:-1px;width:910px;height:180px;border:1px solid #666;z-index:999;background-color:#ddd;background-position:0 -12px;background-repeat:repeat-x;}
/* Set the menu hovers to show sub menus */
#global-nav ul li:hover .subMenuHandle,
#global-nav ul li:hover .subMenu
{display:block;}
/* Set the sub menu container positions */
#masNav .subMenu {margin-left:-83px;}
#shiNav .subMenu {margin-left:-183px;}
#repNav .subMenu {margin-left:-283px;}
#setNav .subMenu {margin-left:-383px;}
/* Set the noise in the menus */
.bg-noise {position:absolute;left:0;top:0;width:100%;height:100%;background:url("https://www.beta.net/_images/_global/bg-noise.png") repeat;}