contoh 30 navigasi dengan css untuk blog

Untuk menambahkan menu navigasi yang dipilih ke template blogger Anda ikuti langkah-langkah,

1. Pergi Untuk Blogger> Tata Letak
2. Klik Tambah Gadget atau Tambah elemen Halaman
3. Pilih HTML / JavaScript widget
4. Sederhana Tempel Menu Navigasi Kode di HTML / JavaScript widget
5. Simpan hit
6. Tarik HTML / JavaScript widget dan menjatuhkannya tepat di bawah header blog Anda, seperti yang ditunjukkan di bawah ini,

7. Akhirnya melihat blog Anda untuk melihat sesuatu yang menggantung di bawah header Blog Anda / Logo.

Lihat Live Demo dari Navigation Menu MBT # 3

Untuk mengubah link, Edit ini bagian dari HTML dalam semua kode di bawah ini,

<li> <a href="#"> <span> Link 1 </ span> </ a> </ li>
<li> <a href="#"> <span> Link 2 </ span> </ a> </ li>
<li> <a href="#"> <span> Link 3 </ span> </ a> </ li>
<li> <a href="#"> <span> Link 4 </ span> </ a> </ li>
<li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li>
<li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li>
<li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li>

Ganti tanda (#) hash dengan Anda Page Link / URL dan ganti Link1, Link2, Link3 dll dengan Judul Halaman Anda. Jika Anda ingin menambahkan atau menghapus tab maka cukup menambahkan atau menghapus baris ini,

<li> <a href="#"> <span> Tautan n </ span> </ a> </ li>

Sebagai desainer, saya selalu mencari inspirasi yang dapat berguna untuk kedua pembaca saya dan untuk merancang proyek-proyek saya. Saya berharap sumber daya di bawah ini akan berguna besar untuk Blogger dari semua platform dan untuk desainer. Memilih Start Navigation Menu favorit Anda dan jangan ragu untuk meminta saya jika Anda membutuhkan bantuan dalam menyesuaikan itu.

Demo 1 :: Demo Live 2

Tips: - Untuk Lihat Demo Dari Menu lain, Cukup Copy Paste Kode Di dalam HTML Editor MBT dan Gambaran Hit Untuk See It Live.

MBT Navigation Menu # 1

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> # navcontainer {/ * tidak diperlukan * /} ul {# navlist margin: 0; padding: 0; daftar-gaya-type: none; white-space: nowrap;} ul li {# navlist float: left; font yang -family: Verdana, Arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 0 4px; background-color: # 666; border-top: 1px solid # e0ede9; perbatasan-bottom: 1px solid # e0ede9;} # navlist sebuah, # navlist suatu: link {margin: 0; padding: 5px 9px 9px 4px; color: # fff; perbatasan-kanan: 1px solid # d1e3db; text-decoration: none ;} # navlist ul li # aktif {color: # 95bbae; background-color: # d1e3db;} # navlist a: hover {color: # fff; background-color: # FE9C54;} </ style> <div id = " navcontainer "> <ul id="navlist"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href ="#">< span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li > <li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> < / a> </ li> </ ul> </ div></span>

MBT Navigation Menu # 2

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> # navcontainer {float: left; width: 100%; background: # fff; font: 7.5pt berani Verdana; line-height: normal; perbatasan-bottom: 1px solid # 6659A7; border-top: 1px solid # 6659A7 ;} ul {# navlist margin: 0; padding: 0; daftar-gaya-type: none; white-space: nowrap;} ul li {# navlist float: left; font-family: Verdana, Arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 0 4px; background-color: # 6659A7; border-top: 1px solid # e0ede9; perbatasan-bottom: 1px solid # e0ede9;} # navlist sebuah, # navlist suatu: link {margin: 0; padding: 5px 9px 9px 4px; color: # fff; perbatasan-kanan: 1px solid # d1e3db; text-decoration: none;} # navlist ul li # aktif {color: # 95bbae; background-color: # d1e3db;} # navlist a: hover {color: # 666; background-color: # fff;} </ style> <div id="navcontainer"> <ul id="navlist"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href = "#" > <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

MBT Navigation Menu # 3

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> # tab {font: 7.5pt tebal Verdana;} # {navcontainer float: left; margin: 0; padding: 8px 0px; width: 100%; background: # 575656; font-size: 93%; line-height : normal;} ul {# navlist margin: 0; padding: 0; daftar-gaya-type: none; white-space: nowrap;} ul li {# navlist float: left; font: 7.5pt berani Verdana; line-height : 14px; margin: 0; padding: 5px 5px 0 0;} # navlist sebuah, # navlist suatu: link {margin: 0; padding: 10px; color: # fff; border: 4px solid # 575656; text-decoration: none ;} # navlist a: hover {color: # fff; border: 4px solid # fff;} </ style> <div id="navcontainer"> <ul id="navlist"> <li> <a href = "# "> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> < / li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span > </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

MBT Navigation Menu # 4

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> # tabs1 {font: 7.5pt tebal Verdana;} # tabs9 img {border: none;} # navcontainer {margin: 10px 0 0 30px; padding: 0; height: 20px;} # navcontainer ul {border: 0; margin: 0; padding: 0; daftar-gaya-type: none; text-align: center;} # navcontainer ul li {display: block; float: left; text-align: center; padding: 0; margin: 0; } # navcontainer ul li a {background: # fff; width: 78px; height: 18px; border-top: 1px solid # ddd; border-left: 1px solid # ddd; perbatasan-bottom: 1px solid # ddd; perbatasan-kanan : 1px solid # ddd; padding: 0; margin: 0 0 5px 0; color: # 666; text-decoration: none; display: block; text-align: center; Font: normal 10px/18px verdana;} # navcontainer ul li a: hover {color: # 6659A7; background: # eeeeee;} # navcontainer yang: aktif {background: # C60; color: # fff;} # # aktif navcontainer li latar belakang {: # C60; border: 1px # padat C60; color: # fff;} </ style> <div id="navcontainer"> <ul id="navlist"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href = "#" > <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> < a href ="#">< p> Link 7 </ span> </ a> </ li> </ ul> </ div></span>

MBT Navigation Menu # 5

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhosct6rFBmHtPEcc76XIMZp34oVrVtjkvTbKWcoNvU9aNjPVHFKcTEfSYCOxhRf0kGZXUzLTujQZ90J-YYLXVZ2BOWz8v_F42s44YP3Zn8YMxBlHBvuUyxsc76_Hh6fKxsz_BJETDqo/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> kontainer {width: 500px; padding: 0 0 5px 0; margin: 3px 0 0 10px; background: # fff;} # nav {margin: 0; padding: 0; border-top: 3px solid # 5F6A71;. # nav li} {margin: 0; padding: 0; display: inline; daftar-gaya-type: none;} # nav a: link, # nav a: visited {float: left; font: 7.5pt verdana tebal; baris -height: 14px; padding: 9px; text-decoration: none; color: # 708491;} # nav suatu: link.active, # nav yang: visited.active, # nav a: hover {color: # 666; latar belakang: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLhosct6rFBmHtPEcc76XIMZp34oVrVtjkvTbKWcoNvU9aNjPVHFKcTEfSYCOxhRf0kGZXUzLTujQZ90J-YYLXVZ2BOWz8v_F42s44YP3Zn8YMxBlHBvuUyxsc76_Hh6fKxsz_BJETDqo/s1600/Inverted.png) pusat tidak mengulang-atas; border-top: 4px solid # 5F6A71;} </ style> <div class="container"> <ul id="nav"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href ="#">< span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 6

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left;</span> <style> # tabsI {float: left; width: 100%; background: # EFF4FA; font: Verdana tebal 7.5pt; line-height: normal; perbatasan-bottom: 1px solid # DD740B;} # tabsI ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabsI li {display: inline; margin: 0; padding: 0;} # {tabsI float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 5px; text-decoration: none;} # tabsI rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsI rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsI a: hover rentang {color: # FFF;} # tabsI a: hover {background-position: 0%-42px;} # tabsI a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsI"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 7

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left;</span> <style> # tabsG {float: left; width: 100%; background: # 666; font: 7.5pt tebal Verdana; line-height: normal;} # tabsG ul {margin: 0; padding: 10px 10px 50px 0; daftar -style: none;} # tabsG li {display: inline; margin: 0; padding: 0;} # {tabsG float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsG rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsG rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsG a: hover rentang {color: # FFF;} # tabsG a: hover {background-position: 0%-42px;} # tabsG a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsG"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 8

CSS KODE:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left;</span> <style> # tabsF {float: left; width: 100%; background: # efefef; font: Verdana tebal 7.5pt; line-height: normal; perbatasan-bottom: 1px solid # 666;} # tabsF ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabsF li {display: inline; margin: 0; padding: 0;} # {tabsF float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsF rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 666;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsF rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsF a: hover rentang {color: # FFF;} # tabsF a: hover {background-position: 0%-42px;} # tabsF a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsF"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 9

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> <style> # navcontainer {background: # 369; border-top: 1px solid # 9CC; margin-top: 20px; Font: normal yang normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;} # {navlist daftar gaya : none luar none; margin: 0; padding: 0;} @ media di {# navlist {text-align: center}} # {navlist li bawah: 11px; display: inline; line-height: 1.2em; margin: 0 ; padding: 0; position: relative;} html> body # navlist li {background: # 000; margin: 3px 0 0 0; padding: 4px 0px 4px 0;} # navlist sebuah, # navlist suatu: link, # navlist suatu : visited {background: # 900; border: 1px solid # FFF; bawah: 2px; color: # FFF; kursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 5px 3px; posisi: relatif ; kanan: 2px; text-decoration: none;} # navlist a: hover {background: # C00; bawah: 1px; color: # FFF; position: relative; kanan: 1px;} # navlist yang: aktif {background: # 999; bawah: 0px; color: # FFF; position: relative; kanan: 0px;} # # aktif navlist li {background: # 369; bawah: 13px; display: inline; margin: 3px 0 0 0; padding: 0; position: relative;} html> body # navlist li # aktif {background: # 000; margin: 0 0 4px 4px;} # navlist # aktif sebuah, # navlist # aktif sebuah: link, # navlist # aktif a: visited, # navlist # aktif a: hover {background: # 369; perbatasan-bottom: none; border-left: 1px solid # 9CC; perbatasan-kanan: 1px solid # 9CC; border-top: 1px solid # 9CC; bawah: 0; warna : # FFF; kursor: teks; margin: 0; padding: 2px 5px 5px 0; position: relative; yang benar: 0;} </ style> <div id="navcontainer"> <ul id="navlist"> <li > <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <li> link <a href="#"> <span> 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> < p> Link 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 10

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left;</span> <style> # tabsE {float: left; width: 100%; background: # 000; font: 7.5pt berani Verdana; line-height: normal;} # tabsE ul {margin: 0; padding: 10px 10px 50px 0; daftar -style: none;} # tabsE li {display: inline; margin: 0; padding: 0;} # {tabsE float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsE rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsE rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsE a: hover rentang {color: # FFF;} # tabsE a: hover {background-position: 0%-42px;} # tabsE a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsE"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 11

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left;</span> <style> # tabsD {float: left; width: 100%; background: # FCF3F8; font: Verdana tebal 7.5pt; line-height: normal; perbatasan-bottom: 1px solid # F4B7D6;} # tabsD ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabsD li {display: inline; margin: 0; padding: 0;} # {tabsD float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsD rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # C7377D;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsD rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsD a: hover {color rentang: # C7377D;} # tabsD a: hover {background-position: 0%-42px;} # tabsD a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsD"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 12

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left;</span> <style> # tabs12 img {border: none;} # {tabs12 float: left; width: 100%; background: # F9F7F3; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # C2BDAE ;} # tabs12 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs12 li {display: inline; margin: 0; padding: 0;} # {tabs12 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs12 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # E4D6CD;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs12 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs12 a: hover rentang {color: # FFF;} # tabs12 a: hover {background-position: 0%-42px;} # tabs12 a: hover {background-rentang posisi: 100%-42px;} # tabs12 # arus {background-position: 0%-42px;} # tabs12 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs12"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 13

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left;</span> <style> # tabs11 img {border: none;} # {tabs11 float: left; width: 100%; background: # F9F7F3; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # C2BDAE ;} # tabs11 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs11 li {display: inline; margin: 0; padding: 0;} # {tabs11 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs11 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 9F9584;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs11 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs11 a: hover rentang {color: # FFF;} # tabs11 a: hover {background-position: 0%-42px;} # tabs11 a: hover {background-rentang posisi: 100%-42px;} # tabs11 # arus {background-position: 0%-42px;} # tabs11 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs11"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 14

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left;</span> <style> # tabs10 img {border: none;} # {tabs10 float: left; width: 100%; font: 7.5pt berani Verdana; perbatasan-bottom: 1px solid # 2763A5; line-height: normal;} # tabs10 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs10 li {display: inline; margin: 0; padding: 0;} # {tabs10 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs10 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs10 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs9 a: hover rentang {color: # FFF;} # tabs10 a: hover {background-position: 0%-42px;} # tabs10 a: hover {background-rentang posisi: 100%-42px;} # tabs10 # arus {background-position: 0%-42px;} # tabs10 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs10"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 15

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left;</span> <style> # tabs9 img {border: none;} # {tabs9 float: left; width: 100%; font: 7.5pt berani Verdana; perbatasan-bottom: 1px solid # F45551; line-height: normal;} # tabs9 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs9 li {display: inline; margin: 0; padding: 0;} # {tabs9 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs9 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs9 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs9 a: hover rentang {color: # FFF;} # tabs9 a: hover {background-position: 0%-42px;} # tabs9 a: hover {background-rentang posisi: 100%-42px;} # tabs9 # arus {background-position: 0%-42px;} # tabs9 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs9"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 16

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left;</span> <style> # tabs6 img {border: none;} # {tabs6 float: left; width: 100%; background: # efefef; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # 666 ;} # tabs6 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs6 li {display: inline; margin: 0; padding: 0;} # {tabs6 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs6 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs6 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs6 a: hover rentang {color: # FFF;} # tabs6 a: hover {background-position: 0%-42px;} # tabs6 a: hover {background-rentang posisi: 100%-42px;} # tabs6 # arus {background-position: 0%-42px;} # tabs6 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs6"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 17

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left;</span> <style> # tabs8 img {border: none;} # {tabs8 float: left; width: 100%; background: # FCF1F6; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # E276A7 ;} # tabs8 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs8 li {display: inline; margin: 0; padding: 0;} # {tabs8 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs8 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 333;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs8 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs8 a: hover rentang {color: # 591333;} # tabs8 a: hover {background-position: 0%-42px;} # tabs8 a: hover {background-rentang posisi: 100%-42px;} # tabs8 # arus {background-position: 0%-42px;} # tabs8 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs8"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 18

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left;</span> <style> # tabs7 img {border: none;} # {tabs7 float: left; width: 100%; background: # D4DAE7; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # 333B66 ;} # tabs7 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs7 li {display: inline; margin: 0; padding: 0;} # {tabs7 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs7 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 999;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs7 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs7 a: hover {color rentang: # ECB546;} # tabs7 a: hover {background-position: 0%-42px;} # tabs7 a: hover {background-rentang posisi: 100%-42px;} # tabs7 # arus {background-position: 0%-42px;} # tabs7 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs7"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 19

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left;</span> <style> # tabsK {float: left; width: 100%; background: # E7E5E2; font: Verdana tebal 7.5pt; line-height: normal; perbatasan-bottom: 1px solid # 54545C;} # tabsK ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabsK li {display: inline; margin: 0; padding: 0;} # {tabsK float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsK rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsK rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsK a: hover rentang {color: # FFF; background-position: 100%-42px;} # tabsK a: hover {background-position: 0%-42px;} # tabsK a: hover {background-rentang posisi : 100%-42px;} </ style> <div id="tabsK"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href = "#" > <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 20

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left;</span> <style> # tabs4 img {border: none;} # {tabs4 float: left; width: 100%; font: 7.5pt berani Verdana; line-height: normal; perbatasan-bottom: 1px solid # 6B78A9;} # tabs4 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs4 li {display: inline; margin: 0; padding: 0;} # {tabs4 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 7px; text-decoration: none;} # tabs4 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # 6B78A9;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs4 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs4 a: hover {color rentang: # 6B78A9;} # tabs4 a: hover {background-position: 0%-42px;} # tabs4 a: hover {background-rentang posisi: 100%-42px;} # tabs4 # arus {background-position: 0%-42px;} # tabs4 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs4"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 21

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left;</span> <style> # tabs3 img {border: none;} # {tabs3 float: left; width: 100%; background: # E4E6EB; font: 7.5pt tebal Verdana; line-height: normal;} # tabs3 ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabs3 li {display: inline; margin: 0; padding: 0;} # {tabs3 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs3 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs3 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs3 a: hover rentang {color: # FFF;} # tabs3 a: hover {background-position: 0%-42px;} # tabs3 a: hover {background-rentang posisi: 100%-42px;} # tabs3 # arus {background-position: 0%-42px;} # tabs3 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs3"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 22

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left;</span> <style> # tabs2 img {border: none;} # {tabs2 float: left; width: 100%; font: 7.5pt berani Verdana; line-height: normal; perbatasan-bottom: 1px solid # 84776B;} # tabs2 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs2 li {display: inline; margin: 0; padding: 0;} # {tabs2 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs2 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # 84776B;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs2 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs2 a: hover {color rentang: # 74675B;} # tabs2 a: hover {background-position: 0%-42px;} # tabs2 a: hover {background-rentang posisi: 100%-42px;} # tabs2 # arus {background-position: 0%-42px;} # tabs2 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs2"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 23

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> . <style> kontainer {width: 500px; padding: 15px; margin: 3px 0 0 20px; border: 1px solid # ccc; background: # fff;} / * persegi * / # navSquare {margin: 0; padding: 0 0 20px 10px; perbatasan-bottom: 1px solid # 9FB1BC;} # navSquare li {margin: 0; padding: 0; display: inline; daftar-gaya-type: none;} # navSquare a: link, # navSquare a: visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 12px 6px; text-decoration: none; color: # 708491;} # navSquare suatu: link.active, # navSquare suatu: visited.active, # navSquare a: hover {color: # 000; background: url (file: / / localhost / C: / Program% 20Files/CSS%% 20Designer 202/styles/Square/Square.gif% 20Tab ) tidak mengulang-pusat bawah;} </ style> <div class="container"> <ul id="navSquare"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href = "#" > <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> < a href ="#">< p> Link 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 24

Tidak ada Gambar Digunakan

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div></span> <style> # navcontainer {background: # f0e7d7; margin: 0 auto; padding: 0 0,2 0,4 em em 0; font-family: Georgia, serif; text-transform: uppercase; font-size: 14px;} / * untuk meregangkan div wadah untuk mengandung daftar melayang * / # navcontainer: setelah {isi:; menampilkan ".": block; line-height: 1px; font-size: 1px; clear: both;} ul {# navlist daftar-style: none ; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em;} ul li {# navlist display: block; float: left; margin: 0; padding-bottom: 2px;} ul # navlist li a {display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: # FFE # aaab9c # ccc # fff; border-style: solid; color: # 777; text-decoration : none; background: # f7f2ea;} # navcontainer> ul # navlist li lebar {: auto;} ul li # # navlist aktif latar belakang {: # f0e7d7; color: # 800000;} # navlist ul li a: hover, ul li # # navlist aktif a: hover {color: # 800000; background: transparent; border-color: # fff aaab9c # # fff # ccc;} </ style> <div id="navcontainer"> <ul id = " navlist "> <li> <a href="#"> <span> Liddddnk 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span > </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <p > Linddddkdd 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href = "#">< p> Link 6 </ span> </ a> </ li> <a href="#"> <span> Linddddk 7 </ span> </ a> </ li> < / ul> </ div></span>

Tab menu # 25

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left;</span> <style> # tabsH {float: left; width: 100%; background: # 000; font: 7.5pt tebal Verdana; line-height: normal;} # tabsH ul {margin: 0; padding: 10px 10px 50px 0; daftar -style: none;} # tabsH li {display: inline; margin: 0; padding: 0;} # {tabsH float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsH rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsH rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsH a: hover rentang {color: # FFF;} # tabsH a: hover {background-position: 0%-42px;} # tabsH a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsH"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 26

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left;</span> <style> # tabs1 img {border: none;} # {tabs1 float: left; width: 100%; background: # F4F7FB; font: 7.5pt tebal Verdana; line-height: normal; perbatasan-bottom: 1px solid # BCD2E6 ;} # tabs1 ul {margin: 0; padding: 10px 10px 50px 0; daftar-style: none;} # tabs1 li {display: inline; margin: 0; padding: 0;} # {tabs1 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs1 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # 627EB7;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs1 rentang {float: none;} / * Akhir IE5-Mac hack * / # tab a: hover {color rentang: # 627EB7;} # tabs1 a: hover {background-position: 0%-42px;} # tabs1 a: hover {background-rentang posisi: 100%-42px;} # tabs1 # arus {background-position: 0%-42px;} # tabs1 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs1"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 27

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left;</span> <style> # tab {float: left; width: 100%; background: # BBD9EE; font: 7.5pt berani Verdana; line-height: normal;} # {tab ul margin: 0; padding: 10px 10px 50px 0; daftar -style: none;} # {tab li display: inline; margin: 0; padding: 0;} # {tab float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tab rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 666;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tab rentang {float: none;} / * Akhir IE5-Mac hack * / # tab a: hover rentang {color: # FF9834;} # tab a: hover {background-position: 0%-42px;} # tab a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabs"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 28

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left;</span> <style> # tabs5 img {border: none;} # {tabs5 float: left; width: 100%; background: # E3ECF3; font: 7.5pt tebal Verdana; line-height: normal;} # tabs5 ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabs5 li {display: inline; margin: 0; padding: 0;} # {tabs5 float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabs5 rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # FFF;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabs5 rentang {float: none;} / * Akhir IE5-Mac hack * / # tabs5 a: hover rentang {color: # FFF;} # tabs5 a: hover {background-position: 0%-42px;} # tabs5 a: hover {background-rentang posisi: 100%-42px;} # tabs5 # arus {background-position: 0%-42px;} # tabs5 # saat ini rentang {background-position: 100%-42px;} </ style> <div id="tabs5"> <ul> <li> < a href ="#">< span> Link 1 </ span> </ a> </ li> <a href="#"> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> </ li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span> </ a> </ li> </ ul> </ div></span>

Tab menu # 29

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left;</span> <style> # tabsB {float: left; width: 100%; background: # F4F4F4; font: 7.5pt tebal Verdana; line-height: normal;} # tabsB ul {margin: 0; padding: 10px 10px 50px 0; daftar -style: none;} # tabsB li {display: inline; margin: 0; padding: 0;} # {tabsB float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 4px; text-decoration: none;} # tabsB rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; color: # 666;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsB rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsB a: hover {color rentang: # 000;} # tabsB a: hover {background-position: 0%-42px;} # tabsB a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsB"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>

Tab menu # 30

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left;</span> <style> # tabsJ {float: left; width: 100%; background: # F4F4F4; font: Verdana tebal 7.5pt; line-height: normal; perbatasan-bottom: 1px solid # 24618E;} # tabsJ ul {margin: 0 ; padding: 10px 10px 50px 0; daftar-style: none;} # tabsJ li {display: inline; margin: 0; padding: 0;} # {tabsJ float: left;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block;</span> tidak mengulang-kiri atas; margin: 0; padding: 0 0 0 5px; text-decoration: none;} # tabsJ rentang {float: left; display: block;</span> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div></span> tidak mengulang-kanan atas; padding: 5px 15px 4px 6px; warna: # 24618E;} / * Komentar backslash Hack aturan menyembunyikan dari IE5-Mac \ * / # tabsJ rentang {float: none;} / * Akhir IE5-Mac hack * / # tabsJ a: hover rentang {color: # FFF;} # tabsJ a: hover {background-position: 0%-42px;} # tabsJ a: hover {background-rentang posisi: 100%-42px;} </ style> <div id="tabsJ"> <li> <a href="#"> <span> Link 1 </ span> </ a> </ li> <a href = "# "> <span> Link 2 </ span> </ a> </ li> <a href="#"> <span> Link 3 </ span> </ a> </ li> <a href="#"> <span> Link 4 </ span> </ a> </ li> <a href="#"> <span> Tautan 5 </ span> </ a> < / li> <a href="#"> <span> Tautan 6 </ span> </ a> </ li> <a href="#"> <span> Tautan 7 </ span > </ a> </ li> </ ul> </ div></span>