下の画像に示すように、タブ付きの長方形の外観を実現できるCSSのトリックを知っている人はいますか。
明らかに、これは1つのdivを使用して達成することはできませんが、境界にギャップを作るために1つの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;}