使用CSS创建选项卡式矩形

是否有人知道任何CSS技巧可以实现如下图所示的选项卡式矩形外观

显然，使用一个div无法实现这一点，但是，有谁能想出一个比重叠一个div在另一个div上制造边界间隙更好的方法吗

这是我目前的解决方案，但我觉得可以更好：

HTML:

请不要纠正上面的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>

---

仔细研究后，我得出结论，我最初的边界覆盖方法是实现此选项卡式菜单的最佳方法

HTML:

---

仔细研究后，我得出结论，我最初的边界覆盖方法是实现此选项卡式菜单的最佳方法

HTML:

---

它并不完全相同，但你可以借用cmon的一些想法，有1000多个关于选项卡式菜单的教程，你甚至没有尝试过什么？我查看了这些选项卡，但这稍微复杂一些，因为列表项和下面的菜单之间有边框和间隙。列表项的高度不能高于已存在的高度is@Christoph标签菜单在大多数情况下都很简单！然而，由于菜单的结构，我在这里尝试实现的是更复杂的一点。如果我发布当前菜单的代码会有帮助吗？@BenCarey当然，请这样做。你也可以提供一个小例子，例如on，你会很快得到好的答案。顺便说一句，不管是1px的差异还是20-处理这个问题的方法都是一样的。虽然不同，但你可以从cmon那里借鉴一些想法，有1000多个选项卡式菜单的教程，您甚至还没有尝试过什么？我查看了这些选项卡，但这稍微复杂一些，因为列表项和下面的菜单之间有边框和间隙。列表项的高度不能高于已存在的高度is@Christoph标签菜单在大多数情况下都很简单！然而，由于菜单的结构，我在这里尝试实现的是更复杂的一点。如果我发布当前菜单的代码会有帮助吗？@BenCarey当然，请这样做。你也可以提供一个小例子，例如on，你会很快得到好的答案。顺便说一句，1倍或20倍的差异并不重要——处理这个问题的方法是一样的。

<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>

<nav id="global-nav">
    <ul>
        <li id="homNav"><a href="#" title="Home"></a></li>
        <li id="masNav"><a href="#" title="#">#</a>
            <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"><a href="#" title="#">#</a>
            <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"><a href="#" title="#">#</a>
            <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"><a href="#" title="#">#</a>
            <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>