25 menu css vertikal untuk blog

Cara Tambah Sebuah Navigation Menu Vertikal CSS Untuk Blogger?

Nah proses ini sesederhana mungkin. Cukup ikuti langkah-langkah hati-hati,

1. Pergi Untuk Blogger > Layout> Edit HTML
2. Back-up template anda

Semua Menu Navigasi di bawah ini menggunakan dua buah kode. Salah satunya adalah kode CSS yang bertanggung jawab untuk tampilan dan nuansa dari menu dan yang kedua adalah kode HTML yang bertanggung jawab untuk penentuan posisi menu. Jadi mari kita tahu di mana untuk menambahkan kode masing-masing!

3. Paste kode CSS untuk anda Menu yang dipilih tepat di atas ]]></ b: skin>
4. Untuk kode HTML ada dapat dua posisi baik sidebar kanan atau sidebar kiri. Tergantung berapa banyak kolom yang Anda miliki.

• Jika Anda memiliki sidebar kanan lalu paste kode HTML di bawah <div id='sidebar-wrapper'> atau ini id='sidebar-wrapper-right'> <div
• Jika Anda memiliki sidebar kiri kemudian paste kode HTML di bawah <div id='sidebar-wrapper-left'>

Catatan: - Karena template kebanyakan menggunakan pengkodean yang berbeda karena itu jika Anda tidak bisa menemukan kode diatas maka jangan khawatir hanya berbagi URL blog Anda di kotak komentar dan saya akan melihat template Anda coding dan akan memberitahu Anda langsung yang kode untuk mencari!

5. Akhirnya menyimpan template Anda dan lihat Menu Navigasi yang indah tergantung di sidebar Anda: D

Editing Link Navigasi Dalam Menu

Untuk mengubah Link menu Tab dan Judul, cukup mengedit bagian tebal dari kode HTML,

<li> <a href=" #1 "> Link 1 </ a> </ li>
<li> <a href=" #2 "> Link 2 </ a> </ li>
<li> <a href=" #3 "> Link 3 </ a> </ li>
<li> <a href=" #4 "> Link 4 </ a> </ li>
<li> <a href=" #5 "> Link5 </ a> </ li>

Ganti # 1, # 2, # 3 dll 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 dari kode HTML,

<li> <a href=" # "> Link </ a> </ li>

Live Demo Untuk Demo Live Menu Navigasi Lain Cukup menggunakan HTML Editor kami dan Copy dan Paste kode CSS dan HTML di daerah yang tepat dan kemudian mulai bermain dengan kode:>>

Lihat Demo Dengan HTML Editor MBT!

Navigation Menu # 1

CSS KODE:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU33gkdk6gbaHMZPRpkuBE4I_yKSXiSV-MKOv9leXtGg2KE2wNA7lQPrp_mqt-Vr2nF1YmiE3rJWWWDl8uuUhemT-vOYcYMNTiHpRlaErE0E5U4BZU32Z-Mb4EDJb5Lm-hoKC4JC4zvZw/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU33gkdk6gbaHMZPRpkuBE4I_yKSXiSV-MKOv9leXtGg2KE2wNA7lQPrp_mqt-Vr2nF1YmiE3rJWWWDl8uuUhemT-vOYcYMNTiHpRlaErE0E5U4BZU32Z-Mb4EDJb5Lm-hoKC4JC4zvZw/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }</span> # Menu6 ul {list-style: none; margin: 0; padding: 0;} # menu6 img {border: none;} # menu6 {width: 200px; margin: 10px;} # menu6 li a {font-family: Verdana , Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu6 li a: link, # menu6 li a: visited {color: # FFF; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU33gkdk6gbaHMZPRpkuBE4I_yKSXiSV-MKOv9leXtGg2KE2wNA7lQPrp_mqt-Vr2nF1YmiE3rJWWWDl8uuUhemT-vOYcYMNTiHpRlaErE0E5U4BZU32Z-Mb4EDJb5Lm-hoKC4JC4zvZw/s800/menu6.gif); padding: 8px 0 0 20px; } # menu6 li a: hover {color: # FFF; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU33gkdk6gbaHMZPRpkuBE4I_yKSXiSV-MKOv9leXtGg2KE2wNA7lQPrp_mqt-Vr2nF1YmiE3rJWWWDl8uuUhemT-vOYcYMNTiHpRlaErE0E5U4BZU32Z-Mb4EDJb5Lm-hoKC4JC4zvZw/s800/menu6.gif) 0-32px; padding: 8px 0 0 20px;}</span>

KODE HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu6"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 2

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05bNtrByvDpKpJNMEnnie1PaEPYNbzVeCpInwRocHIIw4IOFHnZPXpZuCnLqEAKle1lZ1iYE3-JO8771MXPpnGp2OacaegPQndtLWS6CSwhvmLCh3kx4bpcQhPWWUUPQX6IONH7vJXVE/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05bNtrByvDpKpJNMEnnie1PaEPYNbzVeCpInwRocHIIw4IOFHnZPXpZuCnLqEAKle1lZ1iYE3-JO8771MXPpnGp2OacaegPQndtLWS6CSwhvmLCh3kx4bpcQhPWWUUPQX6IONH7vJXVE/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }</span> # Menu3 ul {list-style: none; margin: 0; padding: 0;} # menu3 img {border: none;} # menu3 {width: 200px; border: 1px solid # ccc; margin: 10px;} # menu3 li ketinggian {: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none ;} # menu3 li a: link, # menu3 li a: visited {color: # 888; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05bNtrByvDpKpJNMEnnie1PaEPYNbzVeCpInwRocHIIw4IOFHnZPXpZuCnLqEAKle1lZ1iYE3-JO8771MXPpnGp2OacaegPQndtLWS6CSwhvmLCh3kx4bpcQhPWWUUPQX6IONH7vJXVE/s800/menu3 gif); padding:. 8px 0 0 30px;} # menu3 li a: hover, # menu3 li # saat ini, # menu3 li a: active {color: # 283A50; background: url (http://lh5.ggpht.com / _7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif) 0-32px; padding: 8px 0 0 30px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu3"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 3

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3BPtXlZiCGzYRy16EdjG0wOsKbOScWN8jtTxrAuCNyuuzTTWAlW2F0aghkVg_-EqH3SoEREE0ywQMxpd0x_AKumYqz2aQlOKKtTFGFEwgY9r_0S7g92N4Bk_dgXgajU2-5zjzmWGLog/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3BPtXlZiCGzYRy16EdjG0wOsKbOScWN8jtTxrAuCNyuuzTTWAlW2F0aghkVg_-EqH3SoEREE0ywQMxpd0x_AKumYqz2aQlOKKtTFGFEwgY9r_0S7g92N4Bk_dgXgajU2-5zjzmWGLog/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }</span> # Menu9 ul {list-style: none; margin: 0; padding: 0;} # menu9 img {border: none;} # menu9 {width: 200px; margin: 10px;} # menu9 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu9 li a: link, # menu9 li a: visited {color: # FFF; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3BPtXlZiCGzYRy16EdjG0wOsKbOScWN8jtTxrAuCNyuuzTTWAlW2F0aghkVg_-EqH3SoEREE0ywQMxpd0x_AKumYqz2aQlOKKtTFGFEwgY9r_0S7g92N4Bk_dgXgajU2-5zjzmWGLog/s800/menu9.gif); padding: 8px 0 0 35px;} # menu9 li a: hover {color: # FFF; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3BPtXlZiCGzYRy16EdjG0wOsKbOScWN8jtTxrAuCNyuuzTTWAlW2F0aghkVg_-EqH3SoEREE0ywQMxpd0x_AKumYqz2aQlOKKtTFGFEwgY9r_0S7g92N4Bk_dgXgajU2-5zjzmWGLog/s800/menu9.gif) 0-32px; bantalan : 8px 0 0 35px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu9"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 4

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcce3hPisafQH4edPPRT_ZB5Z1b7wZmiCBpbxt0lB56HBsItOyvAIgpLoAuAuAAFo3R8Bx5ZFi4Yt2AFoZk77rziMSpCKZHd4JUTuzg57Cdj4BrKvWZGO-CtlMztuZ5OCrtE3sSfw5hcE/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcce3hPisafQH4edPPRT_ZB5Z1b7wZmiCBpbxt0lB56HBsItOyvAIgpLoAuAuAAFo3R8Bx5ZFi4Yt2AFoZk77rziMSpCKZHd4JUTuzg57Cdj4BrKvWZGO-CtlMztuZ5OCrtE3sSfw5hcE/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu6 ul {list-style: none; margin: 0; padding: 0;} # menu6 img {border: none;} # menu6 {width: 200px; margin: 10px;} # menu6 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu6 li a: link, # menu6 li a: visited {color: # 8D9179; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcce3hPisafQH4edPPRT_ZB5Z1b7wZmiCBpbxt0lB56HBsItOyvAIgpLoAuAuAAFo3R8Bx5ZFi4Yt2AFoZk77rziMSpCKZHd4JUTuzg57Cdj4BrKvWZGO-CtlMztuZ5OCrtE3sSfw5hcE/s800/menu6.gif); padding: 8px 0 0 10px;} # menu6 li a: hover, # menu6 li # saat ini, # menu6 li a: active {color: # 6C7250; background: url (http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/ yAWa9ZgZMPU/s800/menu6.gif) 0-32px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu6"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 5

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVnvoOffCwjKk2xrSh5hbcix2ojtle0tQzSlabk5JhxtXwR1nFojZBb8MFKF2BsKa3CnqDIXEpMyDiLYj6_jgFz7iSebVQqSo2edUOv4hCVBsjL6mkrlRL6AY9HPNbXsSmZW87OUwuMs/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVnvoOffCwjKk2xrSh5hbcix2ojtle0tQzSlabk5JhxtXwR1nFojZBb8MFKF2BsKa3CnqDIXEpMyDiLYj6_jgFz7iSebVQqSo2edUOv4hCVBsjL6mkrlRL6AY9HPNbXsSmZW87OUwuMs/s800/menu14.gif); padding: 8px 0 0 10px; }</span> # Menu14 ul {list-style: none; margin: 0; padding: 0;} # menu14 img {border: none;} # menu14 {width: 200px; margin: 10px;} # menu14 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu14 li a: link, # menu14 li a: visited {color: # fff; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVnvoOffCwjKk2xrSh5hbcix2ojtle0tQzSlabk5JhxtXwR1nFojZBb8MFKF2BsKa3CnqDIXEpMyDiLYj6_jgFz7iSebVQqSo2edUOv4hCVBsjL6mkrlRL6AY9HPNbXsSmZW87OUwuMs/s800/menu14.gif) 0-32px; padding: 8px 0 0 10px;} # menu14 li a: hover {color: # 333; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVnvoOffCwjKk2xrSh5hbcix2ojtle0tQzSlabk5JhxtXwR1nFojZBb8MFKF2BsKa3CnqDIXEpMyDiLYj6_jgFz7iSebVQqSo2edUOv4hCVBsjL6mkrlRL6AY9HPNbXsSmZW87OUwuMs/s800/menu14.gif); bantalan : 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu14"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 6

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5v3vXx16cItnwJy4l8KSiFy5YYlGXogNuQUTJ5f42ai04STi4VB8lbcIsKcoZMNouZJTFnH0Sqb3X1wH739r5_N6JxcrhJoCeb6E7kBMZ7cX4OpGNqp_iAlAD1I_B5dDPvuak53GosE/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5v3vXx16cItnwJy4l8KSiFy5YYlGXogNuQUTJ5f42ai04STi4VB8lbcIsKcoZMNouZJTFnH0Sqb3X1wH739r5_N6JxcrhJoCeb6E7kBMZ7cX4OpGNqp_iAlAD1I_B5dDPvuak53GosE/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }</span> # Menu7 ul {list-style: none; margin: 0; padding: 0;} # menu7 img {border: none;} # menu7 {width: 200px; margin: 10px;} # menu7 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu7 li a: link, # menu7 li a: visited {color: # FFF; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5v3vXx16cItnwJy4l8KSiFy5YYlGXogNuQUTJ5f42ai04STi4VB8lbcIsKcoZMNouZJTFnH0Sqb3X1wH739r5_N6JxcrhJoCeb6E7kBMZ7cX4OpGNqp_iAlAD1I_B5dDPvuak53GosE/s800/menu7.gif); padding: 8px 0 0 30px;} # menu7 li a: hover {color: # FFF; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5v3vXx16cItnwJy4l8KSiFy5YYlGXogNuQUTJ5f42ai04STi4VB8lbcIsKcoZMNouZJTFnH0Sqb3X1wH739r5_N6JxcrhJoCeb6E7kBMZ7cX4OpGNqp_iAlAD1I_B5dDPvuak53GosE/s800/menu7.gif) 0-32px; bantalan : 8px 0 0 30px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu7"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 7

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }</span> # Menu2 ul {list-style: none; margin: 0; padding: 0;} # menu2 img {border: none;} # menu2 {width: 200px; border-style: none padat padat padat; border-color: # 677D92 ; perbatasan ukuran: 1px; border-width: 1px; margin: 10px;} # menu2 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu2 li a: link, # menu2 li a: visited {color: # fff; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif); padding: 8px 0 0 10px;} # menu2 li a: hover, # menu2 li # saat ini {color: # 283A50; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif) 0-32px; padding: 8px 0 0 10px;} # menu2 li a: aktif {color: # 283A50; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwWyqKGnom6dCqL_FFq3yLTQFMZguhVIsgmeNBGsOmjAZ5adAkINJ6YC5KzbDdOcKkjeXkgSOv-eOZCl2hZ32tlkON6DyhivSlCc9xpQ0cVJEyMKSl9AA65dwdDxBd2hLfHQuqoiKvEs/s800/menu2.gif) 0-64px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu2"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 8

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRFHpHeVTOiVQcd0CCvTFZD9z8i7uZHrhGXFl-_GP6mG5RNqBomSBnlpNO2h6FxoW6gugV__eFTWtoO8oMg2bDPtS2PQ74yl4wH7uEZdh1Z4TSjYg-gmNqkXKy2WCdE12yRxVDhljCOY/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRFHpHeVTOiVQcd0CCvTFZD9z8i7uZHrhGXFl-_GP6mG5RNqBomSBnlpNO2h6FxoW6gugV__eFTWtoO8oMg2bDPtS2PQ74yl4wH7uEZdh1Z4TSjYg-gmNqkXKy2WCdE12yRxVDhljCOY/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRFHpHeVTOiVQcd0CCvTFZD9z8i7uZHrhGXFl-_GP6mG5RNqBomSBnlpNO2h6FxoW6gugV__eFTWtoO8oMg2bDPtS2PQ74yl4wH7uEZdh1Z4TSjYg-gmNqkXKy2WCdE12yRxVDhljCOY/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }</span> # Menu9 ul {list-style: none; margin: 0; padding: 0;} # menu9 img {border: none;} # menu9 {width: 200px; margin-top: 10px;} # menu9 li ketinggian {: 32px ; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu9 li a: link, # menu9 li a: visited {color: # E5E8D4; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRFHpHeVTOiVQcd0CCvTFZD9z8i7uZHrhGXFl-_GP6mG5RNqBomSBnlpNO2h6FxoW6gugV__eFTWtoO8oMg2bDPtS2PQ74yl4wH7uEZdh1Z4TSjYg-gmNqkXKy2WCdE12yRxVDhljCOY/s800/menu9. gif); padding: 8px 0 0 10px;} # menu9 li a: hover, # menu9 li # saat ini {color: # 725033; background: url (http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0 -bPbIR-k/s800/menu9.gif) 0-32px; padding: 8px 0 0 10px;} # menu9 li a: active {color: # fff; background: url (http://lh4.ggpht.com/_7wsQzULWIwo / Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0-64px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu9"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 9

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H-cTWcaGrpofNMx9lZUfPcSOWJH9vjeYV1cCzt1QeXm90vdg9FVbpemsEdCxNXZrHV_4F4wFhH_6V3GAdk_SgIwjIAjOR6BO3VIf7CsSPEmMZxuo8nW0LTp32YryQQCc-kQ2yqFufVA/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H-cTWcaGrpofNMx9lZUfPcSOWJH9vjeYV1cCzt1QeXm90vdg9FVbpemsEdCxNXZrHV_4F4wFhH_6V3GAdk_SgIwjIAjOR6BO3VIf7CsSPEmMZxuo8nW0LTp32YryQQCc-kQ2yqFufVA/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }</span> # Menu12 ul {list-style: none; margin: 0; padding: 0;} # menu12 img {border: none;} # menu12 {width: 200px; margin: 10px;} # menu12 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 22px; text-decoration: none;} # menu12 li a: link, # menu12 li a: visited {color: # 666; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H-cTWcaGrpofNMx9lZUfPcSOWJH9vjeYV1cCzt1QeXm90vdg9FVbpemsEdCxNXZrHV_4F4wFhH_6V3GAdk_SgIwjIAjOR6BO3VIf7CsSPEmMZxuo8nW0LTp32YryQQCc-kQ2yqFufVA/s800/menu12.gif); bantalan : 10px 0 0 35px;} # menu12 li a: hover {color: # 000; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H-cTWcaGrpofNMx9lZUfPcSOWJH9vjeYV1cCzt1QeXm90vdg9FVbpemsEdCxNXZrHV_4F4wFhH_6V3GAdk_SgIwjIAjOR6BO3VIf7CsSPEmMZxuo8nW0LTp32YryQQCc-kQ2yqFufVA/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu12"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 10

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsqKkbYMfSx3piN_BUCB2VlLIJaaKLGohdpkz1U1dfZRqsoU-cXchhVvtDV4gZtPZ7TOBWt2L6QjpoWobve_yaTncxjXG20G1VtqZG8BkW8JXDvsvmJifjkY8u30jtZd2-5dSyOpuHsw/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsqKkbYMfSx3piN_BUCB2VlLIJaaKLGohdpkz1U1dfZRqsoU-cXchhVvtDV4gZtPZ7TOBWt2L6QjpoWobve_yaTncxjXG20G1VtqZG8BkW8JXDvsvmJifjkY8u30jtZd2-5dSyOpuHsw/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu13 ul {list-style: none; margin: 0; padding: 0;} # menu13 img {border: none;} # menu13 {width: 200px; margin: 10px;} # menu13 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu13 li a: link, # menu13 li a: visited {color: # C7377D; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsqKkbYMfSx3piN_BUCB2VlLIJaaKLGohdpkz1U1dfZRqsoU-cXchhVvtDV4gZtPZ7TOBWt2L6QjpoWobve_yaTncxjXG20G1VtqZG8BkW8JXDvsvmJifjkY8u30jtZd2-5dSyOpuHsw/s800/menu13.gif); padding: 8px 0 0 10px;} # menu13 li a: hover {color: # C7377D; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsqKkbYMfSx3piN_BUCB2VlLIJaaKLGohdpkz1U1dfZRqsoU-cXchhVvtDV4gZtPZ7TOBWt2L6QjpoWobve_yaTncxjXG20G1VtqZG8BkW8JXDvsvmJifjkY8u30jtZd2-5dSyOpuHsw/s800/menu13.gif) 0-32px; bantalan : 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu13"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 11

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }</span> # Menu4 ul {list-style: none; margin: 0; padding: 0;} # menu4 img {border: none;} # menu4 {width: 200px; border-style: none padat padat padat; border-color: # D76100 ; perbatasan ukuran: 1px; border-width: 1px; margin: 10px;} # menu4 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu4 li a: link, # menu4 li a: visited {color: # 9E3C02; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif); padding: 8px 0 0 30px;} # menu4 li a: hover, # menu4 li # saat ini {color: # fff ; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif) 0-32px; padding: 8px 0 0 30px;} # menu4 li a: active {color: # fff; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTFTf3JSxwAkqFrFfsJM4r-36nx9ZU7G8bA2lsKEJXpXdvZU4wVEHo_wiGgbA3LQ36qLC9D6sDeKOahocpCi-xQFjgrsQoUtaewdkYmCt_xnSWvZO2bsvn5XB5aGkLC9Jhft9s4F9aAg/s800/menu4.gif) 0-64px; padding: 8px 0 0 30px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu4"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 12

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }</span> # Navlist {warna: putih, latar belakang: # 17a; perbatasan-bottom: 0.2em solid # 17a; perbatasan-kanan: 0.2em solid # 17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal, 10px Verdana, sans-serif;} # navlist li {list-style: none; margin: 0; font-size: 1em;} # navlist suatu {display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; warna: putih, latar belakang: # 39c; border-width: 1px; border-style: solid; border-color: # 035 # 5bd # 068 # 6cf; border-left: 1em solid # fc0; padding: 0.5em 0.4em 0.25em 0.75em;} # {# navlist suatu saat border-color: # 035 # 5bd # 068 # F30;} # {navlist lebar: 99%; / * hanya diperlukan untuk Internet Explorer * / } # {navlist dengan suara-family: "\"} \ ""; suara-keluarga: mewarisi; width: 9.6em; / * Tantek-hack seharusnya hanya digunakan jika Internet Explorer 6-dalam standar-compliant modus * /} # navcontainer> # navlist suatu {width: auto; / * hanya diperlukan jika Anda menggunakan hacks di atas untuk Internet Explorer * /} # navlist a: hover, # navlist sebuah # saat ini: hover {background: # 28b; perbatasan-warna : # 069 # 6cf # 5bd # fc0; padding: 0.4em 0.9em 0.35em 0.25em;} # navlist yang: aktif, # navlist sebuah # saat ini: aktif {background: # 17a; border-color: # 069 # 6cf # 5bd putih; padding: 0.4em 0.9em 0.35em 0.25em;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="navcontainer"> <ul id="navlist"> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a> </ li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 13

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }</span> # Menu8 ul {list-style: none; margin: 0; padding: 0;} # menu8 img {border: none;} # menu8 {width: 200px; margin-top: 10px;} # menu8 li a {text-decoration : none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px;} # menu8 li a: link, # menu8 li a: visited {color: # 777; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/s800/menu8.gif); bantalan : 8px 0 0 20px;} # menu8 li a: hover, # menu8 li # saat ini {color: # 257EB7; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/s800/menu8 . gif) 0-32px; padding: 8px 0 0 25px;} # menu8 li a: active {color: # fff; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPc6XITYhpREdBPmbeiWbni3AxGbYbwgv3m1iIM3C7mhu4fRo4vOdLE16dGMbtR0i0hTlcwgPYnX5ZhquGUec569WPITE1zCKfujK___rZlISo1aOcYJN2ijXTwiBQxbSlvbesaMjmiE/ / menu8.gif) 0-64px; padding: 8px 0 0 25px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu8"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 14

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy45hrFdTyLJLxU0FXv0fHhbDVi10WplEXAdZ16abJtYLQe9hoLPerwm9InSrZXVtp3pc9IJmmEn53uzI8bhMhfZHUSIrAWUwszU8rmCiqozfotQFWcrIGO8P1bqs59Qgm_raRbQPSu6M/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy45hrFdTyLJLxU0FXv0fHhbDVi10WplEXAdZ16abJtYLQe9hoLPerwm9InSrZXVtp3pc9IJmmEn53uzI8bhMhfZHUSIrAWUwszU8rmCiqozfotQFWcrIGO8P1bqs59Qgm_raRbQPSu6M/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }</span> # Menu8 ul {list-style: none; margin: 0; padding: 0;} # menu8 img {border: none;} # menu8 {width: 200px; margin: 10px; border-style: solid; border-color: # 656556; perbatasan ukuran: 1px; border-width: 1px;} # menu8 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font- weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu8 li a: link, # menu8 li a: visited {color: # 656556; display: block; background: url (http:/ / lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif); padding: 8px 0 0 20px;} # menu8 li a: hover {color: # 474739; background: url (http:// lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif) 0-32px; padding: 8px 0 0 20px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu8"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 15

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbG3Y8vc2jGSxtBNVJpVIMmoSr5T0ku0BbFPHUoCuFooKRr7xTYsBmipIssv_ecZoI4mmWkVlG9DNFIXgeJwwI1kJ5iByx91P0kE5yxFx_IGys2lR96Q_YaRUDDeUMx4wxN8FWjJoNgE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbG3Y8vc2jGSxtBNVJpVIMmoSr5T0ku0BbFPHUoCuFooKRr7xTYsBmipIssv_ecZoI4mmWkVlG9DNFIXgeJwwI1kJ5iByx91P0kE5yxFx_IGys2lR96Q_YaRUDDeUMx4wxN8FWjJoNgE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu9 body {font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF;} # menu1 ul {list-style: none; margin: 0; padding: 0;} # menu1 img {border: none;} # menu1 {width: 200px; margin: 10px; border-style: none padat padat padat; border-color: # 3D261D; perbatasan-size: 1px ; border-width: 1px;} # menu1 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; tinggi: 24px; text-decoration: none;} # menu1 li a: link, # menu1 li a: visited {color: # E4D6CD; display: block; background: url (http://lh3.ggpht.com/ _7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif); padding: 8px 0 0 10px;} # menu1 li a: hover {color: # FFF; background: url (http://lh3.ggpht.com/_7wsQzULWIwo / Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif) 0-32px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu1"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 16

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; 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; }</span> # Navcontainer {background: # f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: Georgia, serif; font-size: 13px; text-align: center; teks-transform: lowercase;} ul # navlist {text-align: kiri; daftar-style: none; padding: 0; margin: 0 auto; width: 70%;} ul li {# navlist display: block; margin: 0; padding: 0;} ul # navlist li a {display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: # FFE # aaab9c # ccc # fff; border-style: solid; warna: # 777; text-decoration: none; background: # f7f2ea;} # navcontainer> ul # navlist li a {width: auto;} ul li # # navlist aktif latar belakang {: # f0e7d7; color: # 800000;} ul # navlist li a: hover, ul li # # navlist yang aktif: hover {color: # 800000; background: transparent; border-color: # fff aaab9c # # fff # ccc;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="navcontainer"> <ul id="navlist"> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a> </ li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 17

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfxEMHnBDrhZmURnKfSRChdKa3Kbf_d8tORkFDRnKufH-HBbZNdTnFy1Sl3Zhf31lu6Av9v97kvpuooAQC4L9KO5fXHXw4FqumMf6Mdc8EfHd-pSBuB3Z2ZHqDiEmbqS8ucwe-VMI4jw/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfxEMHnBDrhZmURnKfSRChdKa3Kbf_d8tORkFDRnKufH-HBbZNdTnFy1Sl3Zhf31lu6Av9v97kvpuooAQC4L9KO5fXHXw4FqumMf6Mdc8EfHd-pSBuB3Z2ZHqDiEmbqS8ucwe-VMI4jw/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu3 ul {list-style: none; margin: 0; padding: 0;} # menu3 img {border: none;} # menu3 {width: 200px; margin: 10px; border-style: none padat padat padat; perbatasan- color: # BCD2E6; perbatasan ukuran: 1px; border-width: 1px;} # menu3 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu3 li a: link, # menu3 li a: visited {color: # 8BADCF; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqfxEMHnBDrhZmURnKfSRChdKa3Kbf_d8tORkFDRnKufH-HBbZNdTnFy1Sl3Zhf31lu6Av9v97kvpuooAQC4L9KO5fXHXw4FqumMf6Mdc8EfHd-pSBuB3Z2ZHqDiEmbqS8ucwe-VMI4jw/s800/menu3.gif); padding: 8px 0 0 10px;} # menu3 li a: hover {color: # 627EB7; background: url (http : / / lh5.ggpht.com/_7wsQzULWIwo/Sze7tGEpoOI/AAAAAAAACq4/S0ZV4ChMjyg/s800/menu3.gif) 0-32px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu3"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 18

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioW6gLsZ9_6qGw0R3G4dFpCvRG2bs6PGr0qQ6OVHxNpk8tlGPL1XgURZzNTxLjN4TDw2Xg8vDQ4SkIBm1cyHAtiwpxe2f7MrGimrNGIfyd2lc7Y81dQJ7bxIUKayRjjAt4p-Z9Z8T7nEo/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioW6gLsZ9_6qGw0R3G4dFpCvRG2bs6PGr0qQ6OVHxNpk8tlGPL1XgURZzNTxLjN4TDw2Xg8vDQ4SkIBm1cyHAtiwpxe2f7MrGimrNGIfyd2lc7Y81dQJ7bxIUKayRjjAt4p-Z9Z8T7nEo/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }</span> # Menu11 ul {list-style: none; margin: 0; padding: 0;} # menu11 img {border: none;} # menu11 {width: 200px; margin: 10px; border-style: none padat padat padat; perbatasan- color: # 889944; perbatasan ukuran: 1px; border-width: 1px;} # menu11 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu11 li a: link, # menu11 li a: visited {color: # 889944; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioW6gLsZ9_6qGw0R3G4dFpCvRG2bs6PGr0qQ6OVHxNpk8tlGPL1XgURZzNTxLjN4TDw2Xg8vDQ4SkIBm1cyHAtiwpxe2f7MrGimrNGIfyd2lc7Y81dQJ7bxIUKayRjjAt4p-Z9Z8T7nEo/s400/menu11.gif); padding: 8px 0 0 25px;} # menu11 li a: hover {color: # 889944; background: url (http : / / lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/menu11.gif) 0-32px; padding: 8px 0 0 27px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu11"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 19

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }</span> # Tombol {width: 12em; perbatasan-kanan: 1px solid # 000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; / * 'Trebuchet MS', 'Lucida grande ', Verdana, Arial, sans-serif; * / font-size: 10px; background-color: # 90bade; color: # 333;} # {tombol ul daftar-style: none; margin: 0; padding: 0; border: none;} # {tombol li perbatasan-bottom: 1px solid # 90bade; margin: 0; daftar-style: none; daftar-gaya-image: none;} # {tombol li sebuah display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid # 1958b7; perbatasan-kanan: 10px solid # 508fc4; background-color: # 2175bc; color: # fff; text-decoration: none; width: 100%;} html> body # tombol li a {width: auto;} # tombol li a: hover {border-left: 10px solid # 1c64d1; perbatasan-kanan: 10px solid # 5ba3e0; background-color: # 2586d7; color: # fff;} # tombol li # aktif {border-left: 10px solid # 1c64d1; perbatasan-kanan: 10px solid # 5ba3e0; background-color: # 2586d7; color: # fff;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="button"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 20

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }</span> # Menu ul {list-style: none; margin: 0; padding: 0;} # {menu img border: none;} # menu {width: 200px; border-style: none padat padat padat; border-color: # 94AA74 ; perbatasan ukuran: 1px; border-width: 1px; margin: 10px;} # menu li ketinggian {: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu li a: link, # menu li a: visited {color: # 5E7830; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif); padding: 8px 0 0 10px;} # menu li a: hover, # menu li # saat ini {color: # 26370A ; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif) 0-32px; padding: 8px 0 0 10px;} # menu li a: active {color: # 26370A; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwpARIRcFWB2dftaUpkGJ3raVMmCSNJvJ2hu4HeDjt_f5PThvA_8vEHZXUCQJLLXdyE-r6v5Han90lU1WYCuphFGuvn9QmPVGaPs5OXvhLDMWBEnRCULEgwkhjWQ1FHzxCJhUAhg5vh0/s800/menu1.gif) 0-64px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 21

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y2qSqE3hJPUJBb5U1eXVGAUxPfyamIYO_Jw3gWyq6-UxwP1xNzQJJudiMycfLj8ylBlbJpwdRheuYwsszB0xYzJQxnk4mXzd0Gasc-hvCBRT4hW_W9GcVYTyWOa6yt-SbSNuVNU61Ts/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y2qSqE3hJPUJBb5U1eXVGAUxPfyamIYO_Jw3gWyq6-UxwP1xNzQJJudiMycfLj8ylBlbJpwdRheuYwsszB0xYzJQxnk4mXzd0Gasc-hvCBRT4hW_W9GcVYTyWOa6yt-SbSNuVNU61Ts/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }</span> # Menu2 ul {list-style: none; margin: 0; padding: 0;} # menu2 img {border: none;} # menu2 {width: 200px; margin: 10px; border-style: none padat padat padat; perbatasan- color: # D8D5D1; perbatasan ukuran: 1px; border-width: 1px;} # menu2 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu2 li a: link, # menu2 li a: visited {color: # 3688BA; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y2qSqE3hJPUJBb5U1eXVGAUxPfyamIYO_Jw3gWyq6-UxwP1xNzQJJudiMycfLj8ylBlbJpwdRheuYwsszB0xYzJQxnk4mXzd0Gasc-hvCBRT4hW_W9GcVYTyWOa6yt-SbSNuVNU61Ts/s800/menu2.gif); padding: 8px 0 0 30px;} # menu2 li a: hover {color: # 3688BA; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y2qSqE3hJPUJBb5U1eXVGAUxPfyamIYO_Jw3gWyq6-UxwP1xNzQJJudiMycfLj8ylBlbJpwdRheuYwsszB0xYzJQxnk4mXzd0Gasc-hvCBRT4hW_W9GcVYTyWOa6yt-SbSNuVNU61Ts/s800/menu2.gif) 0-32px; padding: 8px 0 0 32px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu2"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 22

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnUYMGK2AYptu4gvhWqQlcLZAbgApzjG45MiLYDncgwmu_tA0WhCMxTiky5gZnzrY7HDi0nAXEPsIo4AZY-O36QtGViHfrqqYZctIxZuf9GhE3KEIYxI5_VReHD5MDKRDAo8oKYEdObA/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnUYMGK2AYptu4gvhWqQlcLZAbgApzjG45MiLYDncgwmu_tA0WhCMxTiky5gZnzrY7HDi0nAXEPsIo4AZY-O36QtGViHfrqqYZctIxZuf9GhE3KEIYxI5_VReHD5MDKRDAo8oKYEdObA/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnUYMGK2AYptu4gvhWqQlcLZAbgApzjG45MiLYDncgwmu_tA0WhCMxTiky5gZnzrY7HDi0nAXEPsIo4AZY-O36QtGViHfrqqYZctIxZuf9GhE3KEIYxI5_VReHD5MDKRDAo8oKYEdObA/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }</span> # Menu5 ul {list-style: none; margin: 0; padding: 0;} # menu5 img {border: none;} # menu5 {width: 200px; border-style: none none padat padat; border-color: # D0D0D0 ; border-width: 1px; margin: 10px;} # menu5 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold ; background: # FFF; height: 24px; text-decoration: none; # menu5 li a}:;: block; background: url (http://lh3. link, # menu5 li a:: visited {color display # 777 ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif); padding: 25px 0 10px 8px; text-align: right;} # menu5 li a: hover, # menu5 li # saat ini {color: # fff ; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnUYMGK2AYptu4gvhWqQlcLZAbgApzjG45MiLYDncgwmu_tA0WhCMxTiky5gZnzrY7HDi0nAXEPsIo4AZY-O36QtGViHfrqqYZctIxZuf9GhE3KEIYxI5_VReHD5MDKRDAo8oKYEdObA/s800/menu5.gif) 0-32px; padding: 25px 0 10px 8px; text-align: right;} # menu5 li yang: aktif {color: # fff; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnUYMGK2AYptu4gvhWqQlcLZAbgApzjG45MiLYDncgwmu_tA0WhCMxTiky5gZnzrY7HDi0nAXEPsIo4AZY-O36QtGViHfrqqYZctIxZuf9GhE3KEIYxI5_VReHD5MDKRDAo8oKYEdObA/s800/menu5.gif) 0-64px; padding: 25px 0 10px 8px; teks- align: right;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu5"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 23

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfRGQOMgQdg7CC5XGkXuo7KFongwCBgG0YoYkbrp_IGbUl0mVRR9D9maQnAlpcaOzQT1dZvEfHv14dW5ji8oazXTQCvSx-kXU9AZvuDYPiuuHGqfuP-ySOvD1iBYQTEJ35uSxJj1dsm8/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfRGQOMgQdg7CC5XGkXuo7KFongwCBgG0YoYkbrp_IGbUl0mVRR9D9maQnAlpcaOzQT1dZvEfHv14dW5ji8oazXTQCvSx-kXU9AZvuDYPiuuHGqfuP-ySOvD1iBYQTEJ35uSxJj1dsm8/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu5 ul {list-style: none; margin: 0; padding: 0;} # menu5 img {border: none;} # menu5 {width: 200px; margin: 10px;} # menu5 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu5 li a: link, # menu5 li a: visited {color: # FFF; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfRGQOMgQdg7CC5XGkXuo7KFongwCBgG0YoYkbrp_IGbUl0mVRR9D9maQnAlpcaOzQT1dZvEfHv14dW5ji8oazXTQCvSx-kXU9AZvuDYPiuuHGqfuP-ySOvD1iBYQTEJ35uSxJj1dsm8/s800/menu5.gif); padding: 8px 0 0 10px;} # menu5 li a: hover {color: # FFF; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfRGQOMgQdg7CC5XGkXuo7KFongwCBgG0YoYkbrp_IGbUl0mVRR9D9maQnAlpcaOzQT1dZvEfHv14dW5ji8oazXTQCvSx-kXU9AZvuDYPiuuHGqfuP-ySOvD1iBYQTEJ35uSxJj1dsm8/s800/menu5.gif) 0-32px; bantalan : 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu5"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 24

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXorApiNfILXJNciNCgeOlay_koGoKUR8Pp0Ihzbcdwnyqd13Lp8sfo2oW_lQVkPlQvEdmDBGvBLbwFXC0aqsWY3LrCZCsw8h07_LF6MzBljUdUTCqJ5aq29IKi6K3WetmhYhTDLulPRM/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXorApiNfILXJNciNCgeOlay_koGoKUR8Pp0Ihzbcdwnyqd13Lp8sfo2oW_lQVkPlQvEdmDBGvBLbwFXC0aqsWY3LrCZCsw8h07_LF6MzBljUdUTCqJ5aq29IKi6K3WetmhYhTDLulPRM/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu4 ul {list-style: none; margin: 0; padding: 0;} # menu4 img {border: none;} # menu4 {width: 200px; margin: 10px; border-style: none padat padat padat; perbatasan- color: # 000; perbatasan ukuran: 1px; border-width: 1px;} # menu4 li a {height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt ; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu4 li a: link, # menu4 li a: visited {color: # CCC; display: block; background: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXorApiNfILXJNciNCgeOlay_koGoKUR8Pp0Ihzbcdwnyqd13Lp8sfo2oW_lQVkPlQvEdmDBGvBLbwFXC0aqsWY3LrCZCsw8h07_LF6MzBljUdUTCqJ5aq29IKi6K3WetmhYhTDLulPRM/s800/menu4.gif); padding: 8px 0 0 10px;} # menu4 li a: hover {color: # FFF; background: url (http : / / lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif) 0-32px; padding: 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu4"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li> <a href="#5"> Link5 </ a> </ li> </ ul> </ div></span>

Navigation Menu # 25

Kode CSS:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBnsrHzYjsnorgqFanV9G6HEisaCGTlPRInTq4BMWnyvqkBVoudjCZDXK0qoiDXdPw3JpuGXJnu9058MTZWSPlTQOIqo_gVJDwJ8szVENWDpuNwhKRETowo-5WqTsbDwCYFhpERGDID4/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBnsrHzYjsnorgqFanV9G6HEisaCGTlPRInTq4BMWnyvqkBVoudjCZDXK0qoiDXdPw3JpuGXJnu9058MTZWSPlTQOIqo_gVJDwJ8szVENWDpuNwhKRETowo-5WqTsbDwCYFhpERGDID4/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }</span> # Menu10 ul {list-style: none; margin: 0; padding: 0;} # menu10 img {border: none;} # menu10 {width: 200px; margin: 10px;} # menu10 li ketinggian {: 32px; font yang -family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: # FFF; height: 24px; text-decoration: none;} # menu10 li a: link, # menu10 li a: visited {color: # 4D4D4D; display: block; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBnsrHzYjsnorgqFanV9G6HEisaCGTlPRInTq4BMWnyvqkBVoudjCZDXK0qoiDXdPw3JpuGXJnu9058MTZWSPlTQOIqo_gVJDwJ8szVENWDpuNwhKRETowo-5WqTsbDwCYFhpERGDID4/s800/menu10.gif); padding: 8px 0 0 10px;} # menu10 li a: hover {color: # FF9834; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBnsrHzYjsnorgqFanV9G6HEisaCGTlPRInTq4BMWnyvqkBVoudjCZDXK0qoiDXdPw3JpuGXJnu9058MTZWSPlTQOIqo_gVJDwJ8szVENWDpuNwhKRETowo-5WqTsbDwCYFhpERGDID4/s800/menu10.gif) 0-32px; bantalan : 8px 0 0 10px;}</span>
Kode HTML:

<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div></span> <div id="menu10"> <ul> <li> <a href="#1"> Link 1 </ a> </ li> <a href="#2"> Link 2 </ a > </ li> <li> <a href="#3"> Link 3 </ a> </ li> <a href="#4"> Link 4 </ a> </ li> < li><a href="#5">Link5</a></li> </ul> </div></span>

Itu Semua!
Harap Anda menikmati posting. Jangan ragu untuk mengajukan pertanyaan yang berhubungan dengan menu-menu navigasi. Saya senang saya memenuhi janji saya menerbitkan posting ini:>