无法创建导航菜单

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;
}​

我希望它看起来像导航菜单。但是，正如通常那样，我希望内容区域的边框覆盖除活动选项卡之外的所有内容（在本例中为“Dashboard”）：

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

此致

Answer 1

我不是百分之百确定你之后是什么。

从我收集的内容中，您希望边框显示在非活动标签周围，并且没有边框将活动标签与内容分开。这是对的吗？

这基本上不是通过欺骗活动标签覆盖内容边框，使用与内容匹配的边框颜色。

You can see a demo here

但是您需要记下添加到“信息中心”标签的类。这是活动类，它覆盖了应用于选项卡底部的边框。

我添加了一些jquery，以便在单击标签时动态更改边框。