CSS Tabs Menu

Banyak cara untuk membuat menu Tabs seperti gambar di atas baik dengan JavaScript / JQuery maupun CSS.
Di sini saya akan berikan cara membuat Tabs Menu hanya dengan CSS. Menu Tabs ini berjalan di semua browser termasuk MS-IE.

Pada coding CSS terdapat operator > (child combinatory Selector) yang digunakan untuk memilih hanya direct childrennya.
Misal:
.tabs > div {display:inline;}
berarti selector div yang berada langsung di bawah elemen dengan class tabs akan ditampilkan secara inline (seperti tag <span>).
Berikut ini coding selengkapnya.

Menu Tabs Dengan CSS</pre>
<style><!--
.tabs {min-height:300px;position:relative;width:100%;}
.tabs > div {display:inline;}
.tabs > div > a {margin-left:-1px;position:relative;left:1px;text-decoration:none;color:#000000;background:#c0c0c0;display:block;float:left;padding:10px 10px;border:1px solid #ccc;border-bottom: 1px solid #ffffff; }
.tabs > div:not(:target) > a { border-bottom: 0; background: linear-gradient(#ffffff, #c0c0c0); }
.tabs > div:target > a { background:#ffffff; }
.tabs > div > div { background:#ffffff; z-index:-2; left: 0; top:39px; bottom:0; right:0; padding:20px; border:1px solid #ccc; }
.tabs > div:not(:target) > div { position: absolute }
.tabs > div:target > div { position: absolute; z-index: -1; }
--></style>
<pre>

</pre>
<h1>Membuat Menu Tabs dengan CSS</h1>
<div class="tabs">
<div id="tab1"><a href="#tab1">Tab Pertama</a>
<div>... Di Sini Konten Dari Tab Pertama ...</div>
</div>
<div id="tab2"><a href="#tab2">Tab Ke-Dua</a>
<div>... Di Sini Konten Dari Tab Ke-Dua ...</div>
</div>
<div id="tab3"><a href="#tab3">Tab Ke-Tiga</a>
<div>... Di Sini Konten Dari Tab Ke-Tiga ...</div>
</div>
</div>
<pre>

Anda dapat mengembangkan coding ini sesuai kebutuhan Anda.
Selamat mencoba. semoga berhasil.