是否有人知道任何可以实现选项卡式矩形外观的 CSS 技巧，如下图所示。
显然，这不能使用一个 div 来实现，但是，任何人都可以想出一种比将一个 div 重叠在另一个上以在边界上形成间隙更好的方法吗？
这是我目前的解决方案，但我觉得它可能会更好：
HTML：
<div id="handle"></div>
<div id="menu"></div>
CSS（忽略颜色和定位等）：
#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 */
}
以上CSS如有错误请不要更正，我没有测试过。这纯粹是为了展示我目前实现这一目标的方法
非常感谢任何评论
更新
这是菜单的 HTML：
<nav id="global-nav">
<ul>
<li id="homNav"><a href="#" title="Home"></a></li>
<li id="masNav"><a href="#" title="#">#</a>
<!-- 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"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="repNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
<li id="setNav"><a href="#" title="#">#</a>
<div class="handle"></div>
<div class="subMenu">
<!-- Content Here -->
</div>
</li>
</ul>
</nav>
这是菜单的 CSS（我还没有包含子菜单 css）：
/* 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;}