ナビゲーションメニューを作成するときに問題が発生する

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

私はそれがあなたの後に何であるかを確信していません。

あなたが収集したものから、非アクティブなタブの周りに枠線を表示し、アクティブなタブとコンテンツを区切らないようにします。あれは正しいですか？

これは基本的に、アクティブなタブを内容の境界線をコンテンツに一致する境界線で覆うようにトリックすることではありません。

You can see a demo here

しかし、あなたは、「ダッシュボード」タブに追加されたクラスに注意する必要があります。それは適用されているタブの下部にある境界線をカバーするアクティブなクラスです。

タブをクリックしたときに枠線を動的に変更するjqueryを追加しました。