Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below?
While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div over another to create a border gap?
This is my current approach, but I believe there could be room for improvement:
HTML:
<div id="handle"></div>
<div id="menu"></div>
CSS (excluding colors and positioning for brevity):
#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; /* Note that it sits slightly above the handle, covering the top border */
}
Please refrain from correcting the CSS provided above if errors are found. It has not been tested and is meant solely to illustrate my current methodology.
Any feedback would be greatly valued
UPDATE
Here is the HTML structure of the menu as it currently stands:
<nav id="global-nav">
<ul>
<li id="homNav"><a href="#" title="Home"></a></li>
<li id="masNav"><a href="#" title="#">#</a>
<!-- Submenu begins here -->
<div class="handle"></div>
<div class="subMenu">
<!-- Content goes here -->
</div>
<!-- Submenu ends here -->
</li>
...
</ul>
</nav>
Below is the CSS styles for the menu so far (submenu styling omitted):
/* Navigation */
#global-nav {position:relative;width:460px;height:27px;left:15px;top:43px;}
...
/* Specific navigation button styles */
...