Cara Membuat Menu Vertikal Dalam 17 Pilihan

Posted by Tips Trick Blogger Thursday, April 28, 2011 0 comments

Kali ini saya akan menerangkan Cara Membuat Menu Vertikal di Blog. Anda dapat memilih menu yang mana yang anda suka dari banyak pilihan yang diberikan. Silahkan ikuti langkah pemasangannya.

Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Masukkan Kode CSS di atas kode ]]></b:skin>
Simpan Template
Klik lagi Rancangan

Klik Tambah Gadget

Pilih HTML/JavaScript

Masukkan Kode HTML ke dalamnya lalu Simpan
Silahkan pilih mana yang anda suka

Menu 1

Kode CSS
#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/AVvXsEjTLxhSbnBTBqH5BmM-5ozsn60bW7OYjOzcuYcziAf3OTpTXc0BOPaBsXVBDPEEzoWbCjTb6EBTc0P1nm8YvkOw7K_vtNaIdioHkOCEUFmOAZCGpYdXvf5Lc74TcUMj630OvG4YckBX8Zs/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLxhSbnBTBqH5BmM-5ozsn60bW7OYjOzcuYcziAf3OTpTXc0BOPaBsXVBDPEEzoWbCjTb6EBTc0P1nm8YvkOw7K_vtNaIdioHkOCEUFmOAZCGpYdXvf5Lc74TcUMj630OvG4YckBX8Zs/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML
<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>

Menu 2

Kode CSS
#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/AVvXsEhsnsMZZb7tAtk4vT2MnKuuz1AZwsvAX-NDevwLF_2Rni3olAWKbk-JuCHJxC0MOOvWQNDCnO-MxXuCpR_jS_l4M9L9Feg-IFUQGjC2Nrh-JIAE4wBnCe4uOHIqadQbsUJuUik5wDAxRoE/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/AVvXsEhsnsMZZb7tAtk4vT2MnKuuz1AZwsvAX-NDevwLF_2Rni3olAWKbk-JuCHJxC0MOOvWQNDCnO-MxXuCpR_jS_l4M9L9Feg-IFUQGjC2Nrh-JIAE4wBnCe4uOHIqadQbsUJuUik5wDAxRoE/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<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>

Menu 3

Kode CSS
<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>

Kode HTML
<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>

Menu 4

Kode CSS
#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/AVvXsEjQHj1MqS21TlzajfihVpgMZindjvpdOpztwzeEDQDQ0skGfZttt1KaOWJ5wgF6DuGHBPkVTRRxOjgFMNFVLJPjmB_3UGkoWghvGy51Qb27Blhviltu3zSXjGEg8Z-7oxaIc_VFx1bQrkw/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/AVvXsEjQHj1MqS21TlzajfihVpgMZindjvpdOpztwzeEDQDQ0skGfZttt1KaOWJ5wgF6DuGHBPkVTRRxOjgFMNFVLJPjmB_3UGkoWghvGy51Qb27Blhviltu3zSXjGEg8Z-7oxaIc_VFx1bQrkw/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML
<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>

Tampilan 5

Kode CSS
#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/AVvXsEiEJhn150ggBQspbOj8IE_r8hmPFCjqOnSA7q0caIDmBEN7GjChxAdw0C8Lsu8dZCYmkwRcfha_yZUFPOIGST_lZzfME5H1ti0fseGwUgZHbKD4uLxEVgHKC9N69MdmZV0E9VaUblw_X-4/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEJhn150ggBQspbOj8IE_r8hmPFCjqOnSA7q0caIDmBEN7GjChxAdw0C8Lsu8dZCYmkwRcfha_yZUFPOIGST_lZzfME5H1ti0fseGwUgZHbKD4uLxEVgHKC9N69MdmZV0E9VaUblw_X-4/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<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>

Menu 6

Kode CSS
#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/AVvXsEiFtcH6nnzrNcZPwTuWkTnkfiee-a1RgaltMeGHIy-DyAUi4XLCc9AQLtZ1nRtTPQJkOq5Gx_FZhyJm2PVWdixYwhJRXDVE6glaVe6x-bL-DHzDHvChjgwENDhNf89L2AT1QfVk2qQMmyA/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/AVvXsEiFtcH6nnzrNcZPwTuWkTnkfiee-a1RgaltMeGHIy-DyAUi4XLCc9AQLtZ1nRtTPQJkOq5Gx_FZhyJm2PVWdixYwhJRXDVE6glaVe6x-bL-DHzDHvChjgwENDhNf89L2AT1QfVk2qQMmyA/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/AVvXsEiFtcH6nnzrNcZPwTuWkTnkfiee-a1RgaltMeGHIy-DyAUi4XLCc9AQLtZ1nRtTPQJkOq5Gx_FZhyJm2PVWdixYwhJRXDVE6glaVe6x-bL-DHzDHvChjgwENDhNf89L2AT1QfVk2qQMmyA/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML
<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>

Menu 7

Kode CSS
#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/AVvXsEjNTVoFAxPrkZ-o8rzuPPDDgvqdtwd8RDkri4-n0Et2KhOVbppqS-uemqVInDS_BEER1Xzbb28m6VPkE7zUWA7hRvq3dhyphenhyphendruuLjrKBib_cgTJ5Dp-Bn0UM5RnQzV9rEWQY-bdYDTTWaPA/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/AVvXsEjNTVoFAxPrkZ-o8rzuPPDDgvqdtwd8RDkri4-n0Et2KhOVbppqS-uemqVInDS_BEER1Xzbb28m6VPkE7zUWA7hRvq3dhyphenhyphendruuLjrKBib_cgTJ5Dp-Bn0UM5RnQzV9rEWQY-bdYDTTWaPA/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/AVvXsEjNTVoFAxPrkZ-o8rzuPPDDgvqdtwd8RDkri4-n0Et2KhOVbppqS-uemqVInDS_BEER1Xzbb28m6VPkE7zUWA7hRvq3dhyphenhyphendruuLjrKBib_cgTJ5Dp-Bn0UM5RnQzV9rEWQY-bdYDTTWaPA/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML
<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>

Menu 8

Kode CSS
#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/AVvXsEjKgK7fd0g2NczIeUgmXqhYABnsFTbU9Y_bDCNIIu2U0iNkyB7TOap7W3PRqDe6a5jf2rLxl-8g4Uo6pU5OPpV2HST8FhwB3kFSLsxu3wQCQXOAiTtmrioROsvXZhAmvmHZvd0aaLkWfAE/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgK7fd0g2NczIeUgmXqhYABnsFTbU9Y_bDCNIIu2U0iNkyB7TOap7W3PRqDe6a5jf2rLxl-8g4Uo6pU5OPpV2HST8FhwB3kFSLsxu3wQCQXOAiTtmrioROsvXZhAmvmHZvd0aaLkWfAE/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

Kode HTML
<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>

Menu 9

Kode CSS
#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/AVvXsEh8ealtPye_QE2xKicvvT0Ec_d6i8WFqmH3JO_-7ROw_famF34d2BcfbDj1eS5GMfok90ghKmDX4QxcO63Z5TqZ-F1xbVyVdv6DViEIcQsG3Z6tLntsUGSfNLMNawePYLDenSvxZ5_8uHs/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/AVvXsEh8ealtPye_QE2xKicvvT0Ec_d6i8WFqmH3JO_-7ROw_famF34d2BcfbDj1eS5GMfok90ghKmDX4QxcO63Z5TqZ-F1xbVyVdv6DViEIcQsG3Z6tLntsUGSfNLMNawePYLDenSvxZ5_8uHs/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/AVvXsEh8ealtPye_QE2xKicvvT0Ec_d6i8WFqmH3JO_-7ROw_famF34d2BcfbDj1eS5GMfok90ghKmDX4QxcO63Z5TqZ-F1xbVyVdv6DViEIcQsG3Z6tLntsUGSfNLMNawePYLDenSvxZ5_8uHs/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML
<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>

Menu 10

Kode CSS
#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/AVvXsEjD-cIjVZC3hfR8bBgT7_lW6xW83L901ZP17fWxa4a1wzofGvBerjpV7EN6jCB7xsmN3068zDCgZ_o2Qk7L2iVdiHJM0rj6kndP6A-Zp7A0tL2aAnldZ34jIQvn2IpcDUhAtEqJpQhnJ4s/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/AVvXsEjD-cIjVZC3hfR8bBgT7_lW6xW83L901ZP17fWxa4a1wzofGvBerjpV7EN6jCB7xsmN3068zDCgZ_o2Qk7L2iVdiHJM0rj6kndP6A-Zp7A0tL2aAnldZ34jIQvn2IpcDUhAtEqJpQhnJ4s/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/AVvXsEjD-cIjVZC3hfR8bBgT7_lW6xW83L901ZP17fWxa4a1wzofGvBerjpV7EN6jCB7xsmN3068zDCgZ_o2Qk7L2iVdiHJM0rj6kndP6A-Zp7A0tL2aAnldZ34jIQvn2IpcDUhAtEqJpQhnJ4s/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Kode HTML
<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>

Menu 11

Kode CSS
#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/AVvXsEjcCJ0mClnqN5Pn8dW6f0v6IsNPkrQs553ou7Da_B9qUI8AnMoXQtyUCNW8vjmgr7c9r52aVRAk8C3wjNU_Qtv4hYfkXL0cewXyFxHsRjjf6CGQHSzagZaa25IBEwnpnNXJ4h1R5Yy90QI/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcCJ0mClnqN5Pn8dW6f0v6IsNPkrQs553ou7Da_B9qUI8AnMoXQtyUCNW8vjmgr7c9r52aVRAk8C3wjNU_Qtv4hYfkXL0cewXyFxHsRjjf6CGQHSzagZaa25IBEwnpnNXJ4h1R5Yy90QI/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML
<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>

Menu 12

Kode CSS
#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/AVvXsEjba3gpHVhHDlJozZRi4l70TCQ0YIHhfAs-nWEsri5Uc-QuAxIjsU5B7X7RRJJWSREmQHWNGNRZYwnr3NchIYiRWkE_ryU3Fi93vrNMDgeXCBBgp5EXzUHdUjpJvSCxr4XWG8AbogJ3YPg/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjba3gpHVhHDlJozZRi4l70TCQ0YIHhfAs-nWEsri5Uc-QuAxIjsU5B7X7RRJJWSREmQHWNGNRZYwnr3NchIYiRWkE_ryU3Fi93vrNMDgeXCBBgp5EXzUHdUjpJvSCxr4XWG8AbogJ3YPg/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<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>

Menu 13

Kode CSS
#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/AVvXsEjcCJ0mClnqN5Pn8dW6f0v6IsNPkrQs553ou7Da_B9qUI8AnMoXQtyUCNW8vjmgr7c9r52aVRAk8C3wjNU_Qtv4hYfkXL0cewXyFxHsRjjf6CGQHSzagZaa25IBEwnpnNXJ4h1R5Yy90QI/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcCJ0mClnqN5Pn8dW6f0v6IsNPkrQs553ou7Da_B9qUI8AnMoXQtyUCNW8vjmgr7c9r52aVRAk8C3wjNU_Qtv4hYfkXL0cewXyFxHsRjjf6CGQHSzagZaa25IBEwnpnNXJ4h1R5Yy90QI/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML
<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>

Menu 14

Kode CSS
#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/AVvXsEixmM6VxqCPNpVifQI6Nd32P4s5TRmSSdugLKi3MrRCc7ot7dZ23p5dry1nviMG9eiuov6gqoDgTmBGxkZ-uz_sqBO1sP-_D-MjYqwOijvEH-5YScPA5NIOZipf0Nc6KQyQ4YxtPRxID2k/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmM6VxqCPNpVifQI6Nd32P4s5TRmSSdugLKi3MrRCc7ot7dZ23p5dry1nviMG9eiuov6gqoDgTmBGxkZ-uz_sqBO1sP-_D-MjYqwOijvEH-5YScPA5NIOZipf0Nc6KQyQ4YxtPRxID2k/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML
<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>

Menu 15

Kode CSS
#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/AVvXsEigwFpEgnU-oqlchXFckWddW-nZkAAtz2L2AhDDcCZzQbCAlsivb8OPtQ0ZH2n3Fu6Qiv2CDPFk5xv5wLED1wS7XHRtGvd9VYRj80YE01MUumSAhnTfd5pBWEGBPaUOanX2AB0rdSn7LOU/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/AVvXsEigwFpEgnU-oqlchXFckWddW-nZkAAtz2L2AhDDcCZzQbCAlsivb8OPtQ0ZH2n3Fu6Qiv2CDPFk5xv5wLED1wS7XHRtGvd9VYRj80YE01MUumSAhnTfd5pBWEGBPaUOanX2AB0rdSn7LOU/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/AVvXsEigwFpEgnU-oqlchXFckWddW-nZkAAtz2L2AhDDcCZzQbCAlsivb8OPtQ0ZH2n3Fu6Qiv2CDPFk5xv5wLED1wS7XHRtGvd9VYRj80YE01MUumSAhnTfd5pBWEGBPaUOanX2AB0rdSn7LOU/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Kode HTML
<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>

Menu 16

Kode CSS
#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/AVvXsEgn9gOC3Va7aFHvLtq0QvSGw3UJejHSX-cieFamFxvnysnnBRQBgW_dRFvvidFNUHWR_KYzZSWfmt9tF_Npzjcp-w5t8H4SaeE24aqHD2Hu-5HGlUMMdgRA20vrAdpgLD5fkKi518YHY2E/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9gOC3Va7aFHvLtq0QvSGw3UJejHSX-cieFamFxvnysnnBRQBgW_dRFvvidFNUHWR_KYzZSWfmt9tF_Npzjcp-w5t8H4SaeE24aqHD2Hu-5HGlUMMdgRA20vrAdpgLD5fkKi518YHY2E/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<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>

Menu 17

Kode CSS
#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/AVvXsEh0iEuVYkSIYI1NkJKWtTtL5qcndjHGnDQrH0-_h9TMFFaKE3L3gqthF2GRUUqe0ZSEImKJVnWRPGdYphAwPeiUaRFXYyMi7VeuKJtDuFupGY7WtyGeo8fjcm2qmBVuRDgDQsnik1ok0Hs/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0iEuVYkSIYI1NkJKWtTtL5qcndjHGnDQrH0-_h9TMFFaKE3L3gqthF2GRUUqe0ZSEImKJVnWRPGdYphAwPeiUaRFXYyMi7VeuKJtDuFupGY7WtyGeo8fjcm2qmBVuRDgDQsnik1ok0Hs/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<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>