html - 创建导航菜单时遇到问题

Question

我确定这很简单，但我就是想不通。我有这个 HTML ( http://jsfiddle.net/qzr3X/ )

<div id="wrapper">
<ul id="tabs">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Second Tab</a></li>
    <li><a href="#">Third Tab</a></li>
</ul>
<div id="content"></div>

和 CSS:

 * {
    margin: 0;
    padding: 0;
}
ul#tabs {
    list-style-type: none;
    overflow: hidden;
}

ul#tabs li  {
    float: left;
}
ul#tabs li a {
    z-index: 99;
    display: block;
    margin: 0 0.416em -6px 0;
    padding: 1.66em 0.833em;
    border: 1px solid lightgray;
    background: lightgray;
    border-bottom: none;
}

div#content {
    background: lightgray;
    height: 100px;
    border: 1px solid black;
}​

我想让它看起来像一个导航菜单。然而，像往常一样，我想让内容区域的边框覆盖除事件选项卡以外的所有选项卡(在本例中，这将是“仪表板”):

我已经尝试增加 z-index 但它不起作用。我错过了什么？

问候

Answer 1

我不是 100% 确定你想要什么。

据我了解，您希望边框出现在非事件选项卡周围，并且没有边框将事件选项卡与内容分开。对吗？

这基本上不是通过欺骗事件选项卡用与内容匹配的边框颜色覆盖内容边框。

You can see a demo here

但是您需要注意添加到“仪表板”选项卡的类。它是覆盖应用它的选项卡底部边框的事件类。

我添加了一些 jquery 来在您单击选项卡时动态更改边框。