Koleksi yang indah dari beberapa menu navigasi vertikal terbaik yang mudah di tempatkan ke blog atau situs siapa pun! Kode-kode tersebut kompatibel dengan Blogger. Saya harap koleksi ini akan lebih menarik di tab menu navigasi ini dapat dengan mudah diinstal dan disesuaikan.
Bagaimana Cara Menambahkan Menu CSS Navigasi Vertikal ke Blogger?
Prosesnya sangat sederhana. Cukup ikuti langkah-langkah ini dengan hati-hati,
1. Buka Blogger → Tata Letak → Edit HTML
2. Cadangkan template Anda
Semua Menu Navigasi di bawah ini menggunakan dua buah kode. Salah satunya adalah kode CSS yang berfungsi untuk menampilkan nuansa menu dan yang kedua adalah kode HTML yang berfungsi untuk memposisikan menu. Jadi, kita tahu di mana harus menambahkan setiap kode!
3. Tempel kode CSS untuk Menu pilihan Anda tepat di atas ]]> </ b: skin>
4. Untuk kode HTML ada bisa digunakan pada dua posisi yaitu : sidebar kanan atau sidebar kiri Anda. Tergantung berapa banyak kolom yang Anda miliki.
Jika Anda ingin menempatkan pada sidebar kanan maka tempelkan kode HTML tepat di bawah
<div id = 'sidebar-wrapper'> atau ini <div id = 'sidebar-wrapper-right'>
<div id = 'sidebar-wrapper'> atau ini <div id = 'sidebar-wrapper-right'>
Jika Anda menempatkan pada sidebar kiri maka tempelkan kode HTML tepat di bawah
<div id = 'sidebar-wrapper-left'>
<div id = 'sidebar-wrapper-left'>
5. Akhirnya simpan template Anda dan lihat Menu Navigasi yang indah yang tergantung di bilah sisi Anda: D
Mengedit Tautan di Menu Navigasi
Untuk mengubah Tautan dan Judul Menu Tab, cukup edit bagian 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" >Link 5</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" >Link 5</a></li>
Ganti #1, #2, #3, dll dengan Halaman Tautan / URL Anda dan ganti Link1, Link2, Link3 dll dengan Judul Halaman Anda. Jika Anda ingin menambahkan atau menghapus tab, cukup tambahkan atau hapus baris ini dari kode HTML.
<li><a href="#" ><span>Link n</span></a></li>
Navigasi Menu #1
CSS Kode :
#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/AVvXsEh6wja6kiCWt3Nhd8u0KJIpm_7Kwvv3sl6cgv4NOzRGy2UPPAvwTWhrCAO6qxF5ugm3So4nKZfarNHy8emvaaTgawLfV0rQiAk49ja4XEoC1LHNFu4SCEYCBv0-Gg4D4yG4OGj61YvZwZ8/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6wja6kiCWt3Nhd8u0KJIpm_7Kwvv3sl6cgv4NOzRGy2UPPAvwTWhrCAO6qxF5ugm3So4nKZfarNHy8emvaaTgawLfV0rQiAk49ja4XEoC1LHNFu4SCEYCBv0-Gg4D4yG4OGj61YvZwZ8/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }
<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>
Navigasi Menu #2
CSS Kode :
#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/AVvXsEi_YS5D0gI1gErlZcxB-p0Pc3-K2EDPKiDroSGY3KbtIkgXYitco98Fyu53G7VVOjdJVLAEsBV8gleLqpntDaCixOY5ZnztD8w9iGvcPtCD6t-8yb1uMBR7dyHqrM0A7YfrEjfC-Tcd008/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/AVvXsEi_YS5D0gI1gErlZcxB-p0Pc3-K2EDPKiDroSGY3KbtIkgXYitco98Fyu53G7VVOjdJVLAEsBV8gleLqpntDaCixOY5ZnztD8w9iGvcPtCD6t-8yb1uMBR7dyHqrM0A7YfrEjfC-Tcd008/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
<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>
Navigasi Menu #3
CSS Kode :
#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/AVvXsEhEfb4PPxdGZ-O3V-nOJp7y_q13PoPjzXMcyWsG3k-fIKCHIuDpyRHjmMITN1bIj4Av51K0ytyRZZ_aDb-HCLgLM4G9rk8LdilB9XDm-ppX64JAelkHJfaAFx-597UoPdsphMqGq6XGWUQ/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfb4PPxdGZ-O3V-nOJp7y_q13PoPjzXMcyWsG3k-fIKCHIuDpyRHjmMITN1bIj4Av51K0ytyRZZ_aDb-HCLgLM4G9rk8LdilB9XDm-ppX64JAelkHJfaAFx-597UoPdsphMqGq6XGWUQ/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
<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>
Navigasi Menu #4
CSS Kode :
#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/AVvXsEiXOOF5NcNt_v_v9Ifr0LWrZuD-1Tm5LHIOOctMt6uNvRSaD5O_NpR-wSDrL83DH8Z4P_K1e3BYJZR6wtspYI1T_JscaYL1qwDQlbaPuD7eAphRdXGVBrYp8t4uh3D8dyBTXf2WqeC0IHo/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/AVvXsEiXOOF5NcNt_v_v9Ifr0LWrZuD-1Tm5LHIOOctMt6uNvRSaD5O_NpR-wSDrL83DH8Z4P_K1e3BYJZR6wtspYI1T_JscaYL1qwDQlbaPuD7eAphRdXGVBrYp8t4uh3D8dyBTXf2WqeC0IHo/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #5
CSS Kode :
#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/AVvXsEi7u1WhWTCUFADM68C7SlbetfOpdlO_Qn15gF8k_l1y2X1eIYQU2ivegiKthlR8sBWfTqzSK9OM2HhwnWGcYV5Ha1I0_zNVppcFqh0Ls0qQM5g6nQSgQ0o4kei6tGze56QXNKZkFqwhk98/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/AVvXsEi7u1WhWTCUFADM68C7SlbetfOpdlO_Qn15gF8k_l1y2X1eIYQU2ivegiKthlR8sBWfTqzSK9OM2HhwnWGcYV5Ha1I0_zNVppcFqh0Ls0qQM5g6nQSgQ0o4kei6tGze56QXNKZkFqwhk98/s800/menu14.gif); padding: 8px 0 0 10px; }
<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>
Navigasi Menu #6
CSS Kode :
#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/AVvXsEjPS-pHCOScOQNPEqtxmKhOMsjhTQVw0YkBS22XZZ8ccMN62dm_lP7Sz0K_Wdq7hrIR4SNSzpvplNnNknv17uWsIIWZGQhuVKJRIeYtlzikFh8NwdS0jjBo2VExVm9SG4YQ3rqkuFGkLWM/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPS-pHCOScOQNPEqtxmKhOMsjhTQVw0YkBS22XZZ8ccMN62dm_lP7Sz0K_Wdq7hrIR4SNSzpvplNnNknv17uWsIIWZGQhuVKJRIeYtlzikFh8NwdS0jjBo2VExVm9SG4YQ3rqkuFGkLWM/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
<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>
Navigasi Menu #7
CSS Kode :
#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/AVvXsEhCNPSJvGcwpnvRtcoos5Ukwe7iOkN6ofPzw530JRByYUvX09jRnLBMPog0XKOoIjul8ZW1wkggRJ9s7JGov9T-N_y-MwpgwNfiUxFh90t4rv-KPrMM1H5T21aHndvk3CuBrGc720fqBwE/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/AVvXsEhCNPSJvGcwpnvRtcoos5Ukwe7iOkN6ofPzw530JRByYUvX09jRnLBMPog0XKOoIjul8ZW1wkggRJ9s7JGov9T-N_y-MwpgwNfiUxFh90t4rv-KPrMM1H5T21aHndvk3CuBrGc720fqBwE/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/AVvXsEhCNPSJvGcwpnvRtcoos5Ukwe7iOkN6ofPzw530JRByYUvX09jRnLBMPog0XKOoIjul8ZW1wkggRJ9s7JGov9T-N_y-MwpgwNfiUxFh90t4rv-KPrMM1H5T21aHndvk3CuBrGc720fqBwE/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #8
CSS Kode :
#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/AVvXsEi62ZOrmoeuIpRGJEPXTHn600aimKhJ3ysk6fD35p6Ghw23BbGHwPlYufrWi6nJeJ1HySi4wRHuhZOddklrFV3xkNOv3UBsLQQEs1hCw6xLbDcflBxr7nydoRI8a8kRBNKInqTmyrXI7oY/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/AVvXsEi62ZOrmoeuIpRGJEPXTHn600aimKhJ3ysk6fD35p6Ghw23BbGHwPlYufrWi6nJeJ1HySi4wRHuhZOddklrFV3xkNOv3UBsLQQEs1hCw6xLbDcflBxr7nydoRI8a8kRBNKInqTmyrXI7oY/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/AVvXsEi62ZOrmoeuIpRGJEPXTHn600aimKhJ3ysk6fD35p6Ghw23BbGHwPlYufrWi6nJeJ1HySi4wRHuhZOddklrFV3xkNOv3UBsLQQEs1hCw6xLbDcflBxr7nydoRI8a8kRBNKInqTmyrXI7oY/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #9
CSS Kode :
#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/AVvXsEhvmdMUG3P_F5mUStI8-bH-7RNkOEY73CB8prqy6gcPH38pKanj00-KPW_hTqTJujljNbdH-nUk7sJnwbHqEkTBchgowH3Y5JMQW0z-n_QEdSUfzcnFkmG1lLKS5xNaCx6FaZ442ERS6l0/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmdMUG3P_F5mUStI8-bH-7RNkOEY73CB8prqy6gcPH38pKanj00-KPW_hTqTJujljNbdH-nUk7sJnwbHqEkTBchgowH3Y5JMQW0z-n_QEdSUfzcnFkmG1lLKS5xNaCx6FaZ442ERS6l0/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
<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>
Navigasi Menu #10
CSS Kode :
#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/AVvXsEhfdgDHE0ClmRuvW3qBefDQthXvSH1rjKqxssIh4WlWixeGKcDeXWXrDTw0H7g2X5A_sQhVK8_jjVeGFNqetlCIyvS6WtCIGVtyIJkQAzaxFdKdvyuC47nLyRZq-POivzx_A2esYxrubMQ/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdgDHE0ClmRuvW3qBefDQthXvSH1rjKqxssIh4WlWixeGKcDeXWXrDTw0H7g2X5A_sQhVK8_jjVeGFNqetlCIyvS6WtCIGVtyIJkQAzaxFdKdvyuC47nLyRZq-POivzx_A2esYxrubMQ/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #11
CSS Kode :
#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/AVvXsEjgpOOi0vMkt5bsCZLJN27voPFNS6dhSogRxB3N-ia4FXuk4paduF9Toeo8qzL1EEj5NNX_e-cqQtPnk_vb3y2cw4QI2DFp4V4NgPMLK0Nc7ySsGEoIAgCo4qsBWdVsZQ7m_SaCB5TT_R0/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/AVvXsEjgpOOi0vMkt5bsCZLJN27voPFNS6dhSogRxB3N-ia4FXuk4paduF9Toeo8qzL1EEj5NNX_e-cqQtPnk_vb3y2cw4QI2DFp4V4NgPMLK0Nc7ySsGEoIAgCo4qsBWdVsZQ7m_SaCB5TT_R0/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/AVvXsEjgpOOi0vMkt5bsCZLJN27voPFNS6dhSogRxB3N-ia4FXuk4paduF9Toeo8qzL1EEj5NNX_e-cqQtPnk_vb3y2cw4QI2DFp4V4NgPMLK0Nc7ySsGEoIAgCo4qsBWdVsZQ7m_SaCB5TT_R0/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }
<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>
Navigasi Menu #12
CSS Kode :
#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; }
<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>
Navigasi Menu #13
CSS Kode :
#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/AVvXsEjTeH0iLkODhyphenhyphendOa2YmTU1RTldcJUqbPAFqXQ_Am0aKv9KW2k8ibnZZvs5-37FHyaiCm5d5buLgHLUlzwow_AF7V51HrU2awiBepIilQRdVFWlZAoN816i6sV4WoNy5GHgGmHQzAs8EOO8/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/AVvXsEjTeH0iLkODhyphenhyphendOa2YmTU1RTldcJUqbPAFqXQ_Am0aKv9KW2k8ibnZZvs5-37FHyaiCm5d5buLgHLUlzwow_AF7V51HrU2awiBepIilQRdVFWlZAoN816i6sV4WoNy5GHgGmHQzAs8EOO8/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/AVvXsEjTeH0iLkODhyphenhyphendOa2YmTU1RTldcJUqbPAFqXQ_Am0aKv9KW2k8ibnZZvs5-37FHyaiCm5d5buLgHLUlzwow_AF7V51HrU2awiBepIilQRdVFWlZAoN816i6sV4WoNy5GHgGmHQzAs8EOO8/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }
<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>
Navigasi Menu #14
CSS Kode :
#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/AVvXsEhSj6Ux6f0QDXyp0ATuMxmchYPK6jStE7B4z9RDF_1ziosZ-cP9bz_Gywt9CMlRlzvV8aJXezp42s1Au3PXSGyIlNUMAzOR7AnJbSp0OagpRSXvBHOVh7H-C4dqZSFMaH1xKmz6cE7r51Y/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSj6Ux6f0QDXyp0ATuMxmchYPK6jStE7B4z9RDF_1ziosZ-cP9bz_Gywt9CMlRlzvV8aJXezp42s1Au3PXSGyIlNUMAzOR7AnJbSp0OagpRSXvBHOVh7H-C4dqZSFMaH1xKmz6cE7r51Y/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }
<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>
Navigasi Menu #15
CSS Kode :
#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/AVvXsEhTpXjbXxAdH1krkSPexIUvLbAob3kDcyoJ3KB9KfPjfqly4M0RQ5cArjc4uPzhOaOiiYv-cqnt_58jjXer-9Zsx9yUNsQNPguYu6ZCS_EuiwIkEMTO6u2Ga_FO-OvQZflQ-gZPqyiXiZQ/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTpXjbXxAdH1krkSPexIUvLbAob3kDcyoJ3KB9KfPjfqly4M0RQ5cArjc4uPzhOaOiiYv-cqnt_58jjXer-9Zsx9yUNsQNPguYu6ZCS_EuiwIkEMTO6u2Ga_FO-OvQZflQ-gZPqyiXiZQ/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #16
CSS Kode :
#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; }
<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>
Navigasi Menu #17
CSS Kode :
#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/AVvXsEh-QdljI9aVKDBDbqY0S6YNGiGlMpeBTYNgFcaaedmlm77j-MBgNrbHNmX-ANARo3gHLbMD2NRmvJxjX4daN534cpvV56qGpMrXIdwQvqS8C_C9-d88uafNBWFA34uQpWrcxfS2VBmvK7A/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-QdljI9aVKDBDbqY0S6YNGiGlMpeBTYNgFcaaedmlm77j-MBgNrbHNmX-ANARo3gHLbMD2NRmvJxjX4daN534cpvV56qGpMrXIdwQvqS8C_C9-d88uafNBWFA34uQpWrcxfS2VBmvK7A/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #18
CSS Kode :
#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/AVvXsEjxI0PILKID7MaiX0z7c8CIqIiuLakULUpuNv4FvWQbTSoC3il_VJVmBr6YMa8gwwkTTqc0WtPd9KhNgmUgPK5f0eoWKgoWllBsbStB70jTN1JQyKK8MoSeoAG0aqsA0U66sXqiWHWeB48/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxI0PILKID7MaiX0z7c8CIqIiuLakULUpuNv4FvWQbTSoC3il_VJVmBr6YMa8gwwkTTqc0WtPd9KhNgmUgPK5f0eoWKgoWllBsbStB70jTN1JQyKK8MoSeoAG0aqsA0U66sXqiWHWeB48/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
<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>
Navigasi Menu #19
CSS Kode :
#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; }
<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>
Navigasi Menu #20
CSS Kode :
#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/AVvXsEgVstlkhSJimjtRmdmuhODRfLIrB5QTUyJKvr7iP_P0LKkLQdNDpZ7_S_tkX8XSSdf_3chHL8bDOmvBhE1CmP68ZhVLQbqIh_E88vGnvHBABaUxY91XT_VNEsDxnGSQJFeawTDUYEocB8Y/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/AVvXsEgVstlkhSJimjtRmdmuhODRfLIrB5QTUyJKvr7iP_P0LKkLQdNDpZ7_S_tkX8XSSdf_3chHL8bDOmvBhE1CmP68ZhVLQbqIh_E88vGnvHBABaUxY91XT_VNEsDxnGSQJFeawTDUYEocB8Y/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/AVvXsEgVstlkhSJimjtRmdmuhODRfLIrB5QTUyJKvr7iP_P0LKkLQdNDpZ7_S_tkX8XSSdf_3chHL8bDOmvBhE1CmP68ZhVLQbqIh_E88vGnvHBABaUxY91XT_VNEsDxnGSQJFeawTDUYEocB8Y/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #21
CSS Kode :
#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/AVvXsEhR4hHVU-ZL5Se6uDE5YSst9XEcEcjiRsL16fpBRUZaRFZZH7s8_R6QW6aX8myflj9g9X6Jrg6JMphyphenhyphenfTn9cHYDTTPdrnQd0VrtLWbdO9GIDLkmnBp-DKyUXvtwrYZF8UB9T9gWjIzcWuY/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4hHVU-ZL5Se6uDE5YSst9XEcEcjiRsL16fpBRUZaRFZZH7s8_R6QW6aX8myflj9g9X6Jrg6JMphyphenhyphenfTn9cHYDTTPdrnQd0VrtLWbdO9GIDLkmnBp-DKyUXvtwrYZF8UB9T9gWjIzcWuY/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
<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>
Navigasi Menu #22
CSS Kode :
#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/AVvXsEjD7KPm0Xvz2V0VrqPPVeibOqL0oXaz3n251qpMSrsZMrsattfwrBoOvvMT_7FBio3rCnNhPXAOXGn09DR-Z65yHXfe7zWUs5bcdZeBp6SMbvdGaO2KCPQkQx4cgY89JmWU_arF7xkH6Tc/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/AVvXsEjD7KPm0Xvz2V0VrqPPVeibOqL0oXaz3n251qpMSrsZMrsattfwrBoOvvMT_7FBio3rCnNhPXAOXGn09DR-Z65yHXfe7zWUs5bcdZeBp6SMbvdGaO2KCPQkQx4cgY89JmWU_arF7xkH6Tc/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/AVvXsEjD7KPm0Xvz2V0VrqPPVeibOqL0oXaz3n251qpMSrsZMrsattfwrBoOvvMT_7FBio3rCnNhPXAOXGn09DR-Z65yHXfe7zWUs5bcdZeBp6SMbvdGaO2KCPQkQx4cgY89JmWU_arF7xkH6Tc/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
<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>
Navigasi Menu #23
CSS Kode :
#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/AVvXsEgEufpAP5kHvN_CNaFloZf9iLpEUYwKWPEW6T2TSq1qtRix1Qgw_IQHtiy60w4461D4ApZHuGAb8j1214EEDniYYV7o1w6ZuHLuEhcIpP3o7tpwDbZ4XfwC7xACw8cUzVcroDuqG9fOHOE/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEufpAP5kHvN_CNaFloZf9iLpEUYwKWPEW6T2TSq1qtRix1Qgw_IQHtiy60w4461D4ApZHuGAb8j1214EEDniYYV7o1w6ZuHLuEhcIpP3o7tpwDbZ4XfwC7xACw8cUzVcroDuqG9fOHOE/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #24
CSS Kode :
#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/AVvXsEiFtTrIDkXCuEvTfq9oVtOqhpxOL1dOYc5kLmToCSKnU4ZcRWOWBXkfYyhHOE-gbWfIsMzZ5PZ6Q3NiUytMu7rKWL7VsrMlurcUU_SuhDRAAjZ4KCt8zwWQi2cAk-Hyw8Nq6ky0dSY7Q_s/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtTrIDkXCuEvTfq9oVtOqhpxOL1dOYc5kLmToCSKnU4ZcRWOWBXkfYyhHOE-gbWfIsMzZ5PZ6Q3NiUytMu7rKWL7VsrMlurcUU_SuhDRAAjZ4KCt8zwWQi2cAk-Hyw8Nq6ky0dSY7Q_s/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Navigasi Menu #25
CSS Kode :
#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/AVvXsEjn1KITH9tHTRvfnn_JxNoqBaF4CT0i3YgtH1DXQEcxp-IFBlFw1jiZDtFCZ6zAWwsjeixKf02u2eoZ3Q_V6IRNU9yvXxgAt61wlnHxmi5JfdrgqSH06Rsvfr_ERsh_uXBrz3q4gDTPF2g/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1KITH9tHTRvfnn_JxNoqBaF4CT0i3YgtH1DXQEcxp-IFBlFw1jiZDtFCZ6zAWwsjeixKf02u2eoZ3Q_V6IRNU9yvXxgAt61wlnHxmi5JfdrgqSH06Rsvfr_ERsh_uXBrz3q4gDTPF2g/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }
<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>
Itu saja! dan Semoga bermanfaat ...