Harajuku Shina

Ini adalah salah satu dari beberapa widget social sharing yang paling saya sukai karena tampilannya yang rapi dan tidak berantakan. Anda telah melihat tren dari jumlah tombol share melayang di blog-blog populer. Pengembang telah menciptakan versi yang berbeda dari bar ini dan menerapkan efek Jquery dan gaya CSS3 tapi widget ini berbeda karena mengandung kustom Pinterest, Facebook, Twitter, dan tombol Email. Layanan seperti Addthis dan ShareThis keduanya melakukan pekerjaan yang besar, tetapi mereka masih perlu bekerja pada beberapa masalah integrasi plugin mereka. Pinterest pin it button lah yang menyebabkan masalah besar dan kegagalan dalam mengambil gambar thumbnail yang benar. Dalam kebanyakan kasus, bahkan tidak menampilkan gambar sehingga membuat konsep pinning terasa hambar. Namun bar ini didesain ulang dari widget yang disediakan oleh ShareThis untuk membuat yang baru dengan memperbaiki semua kekurangan. Tombol share ini akan melayang di sebelah kiri posting blog Anda dan akan melayang mengikuti scroll pengunjung ke atas atau ke bawah postingan. Widget ini berisi counter dari situs jejaring sosial yang memiliki potensi untuk membawa traffic blog Anda dengan cara mensirkulasi konten Anda ke khalayak yang lebih luas. Kami telah menguji widget ini pada beberapa browser seperti IE8+, Firefox, Google Chrome, dll dan semuanya bekerja dengan baik tanpa masalah kompatibilitas atau konflik desain. Marilah kita bekerja sekarang!

• Masuk ke Blogger > Template
• Backup dulu template Anda
• Klik Edit HTML
• Klik Expand Widget Templates
• Kemudian cari kode berikut ini:

<b:includable id='post' var='post'>

• Letakkan kode di bawah ini tepat di bawah kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.gnr_social_floating{
    position:fixed; bottom:6%; margin-left:-72px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.gnr_social_floating .gnr_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.gnr_social_floating .st_twitter_vcount, .gnr_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.gnr_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.gnr_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.gnr_social_floating .chicklets, .gnr_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0B5aXQwBlLyUMi44D608upumWTxKwRONtOGY1qORpV5Hz0Z-gcJPwvPhw1lZNdI1ufHRCBMlvWbB3Lvidk-f-7HqdlUFnqUQRMHvn3sd5hXfYhVjFcNlAIXk4D5xZ1XI_uWp9YCrHCIK/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0B5aXQwBlLyUMi44D608upumWTxKwRONtOGY1qORpV5Hz0Z-gcJPwvPhw1lZNdI1ufHRCBMlvWbB3Lvidk-f-7HqdlUFnqUQRMHvn3sd5hXfYhVjFcNlAIXk4D5xZ1XI_uWp9YCrHCIK/s400/gc_social_sprite.gif&#39;) !important;
}
.gnr_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.gnr_social_floating  .stButton_gradient{
    border:none !important;
}
.gnr_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.gnr_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}
.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}

.gnr_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.gnr_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.gnr_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0Q5u9SewMhGW2_uVKDv46xoTFuDCXkOkVF66GKuJFFf4P3kLiCNdfKxGzt0OPt-M1qobYr3LFrxjl4RW7SCZPRmVMOadYc-1wXCaupdAQ1NPUCW0CZgTigRMf0yA9y1lglHGLzFZZ-wE/s400/bubble_arrow_pinterest.png') !important;
}

.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='gnr_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='DGeneraBlog'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;D-GENERA BLOG&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://d-genera.blogspot.com/2013/01/memasang-tombol-share-pinterest.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

• Simpan perubahan yang telah Anda lakukan.

Seorang blogger yang baik dapat diidentifikasi dengan cara dia mengelola blog dan mengatur posting-nya. Homepage adalah bagian paling penting dari setiap blog. Homepage harus berisi 5 hingga 6 posting dalam rangka untuk merebut daya tarik pembaca sebanyak mungkin. Menjaga pembaca sibuk untuk waktu yang lama adalah apa yang saya sebut blogging yang sukses. Menampilkan 5-6 posting  selain akan mempercepat waktu loading blog, hal ini juga akan membuat pemandangan yang indah di blog Anda dan menunjukkan ringkasan dari setiap posting. Pada homepage saya, Anda akan melihat link Read More beserta gambar thumnail yang sesuai, dengan mengkliknya maka akan membuka seluruh posting. Lihatlah screenshot di bawah ini:

• Pertama masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang kotak Expand Widget Templates di pojok kiri atas
• Cari kode ini (gunakan fitur search Ctrl + F untuk memudahkan pencarian)

Pada postingan saya kali ini, saya akan menyediakan 25 Tab Menu Navigasi Vertikal yang menggunakan kode CSS dan HTML. Saya sudah memeriksa dan mencoba kode yang diambil dari Christopher dan Highdots dan hasilnya semuanya kompatibel dengan Blogger karena ada sebagian yang saya modifikasi. Saya berharap koleksi ini akan menarik bagi sebagian besar dari Anda karena tab menu navigasi ini bisa dengan mudah dapat Anda diinstal, disesuaikan dan dicopy! Saya berharap ini akan sangat membantu untuk desainer baru seperti saya :)

• Masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang Expand Widget Templates
• Paste kode CSS dari Menu yang Anda pilih tepat di atas kode ]]></b:skin>
• Untuk kode HTML bisa ada 2 posisi yang baik yaitu di sidebar kanan atau kiri. Tergantung berapa banyak kolom yang Anda miliki:
• Jika Anda memiliki sidebar di kanan, paste kode HTML di bawah kode <div id='sidebar-wrapper'>  atau <div id='sidebar-wrapper-right'>
• Jika Anda memiliki sidebar di kiri, paste kode HTML di bawah kode <div id='sidebar-wrapper-left'>
• Anda juga bisa langsung memasukkannya melalui gadget dengan cara masuk ke Layout > Add a Gadget > HTML/JavaScript, pastekan script HTML dari menu yang Anda pilih di dalamnya.
• Terakhir, simpan template Anda dan lihatlah perubahan yang terjadi

<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="#" >Link</a></li>

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

#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/AVvXsEijXeskVlmbZ-aiZbChYEzHsfbLuUXfnoPxL6l-DWTMz7eGZwFJlebKyUHJHkA5Hh9dvTO_xtJFP7CWQbg134G3Q2SXhByVPD7udR2QjKtqIaxJRnTYHa8RjQcuxvyJ2TSsaJLAAIKwIBw/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/AVvXsEijXeskVlmbZ-aiZbChYEzHsfbLuUXfnoPxL6l-DWTMz7eGZwFJlebKyUHJHkA5Hh9dvTO_xtJFP7CWQbg134G3Q2SXhByVPD7udR2QjKtqIaxJRnTYHa8RjQcuxvyJ2TSsaJLAAIKwIBw/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>

#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/AVvXsEhaVp3o3Vb48UWmZIpQxj9d4L2in6ly6Un9ZKGhshJvG32zHsvTgUs2ZQlyF_II-eI1m10myq_TL147KdL0wTPrFTJupSLmKUkUmI0n56ZHjyv8NtlPbUSnKF_rCLi0N4smGkC1QW39gBE/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVp3o3Vb48UWmZIpQxj9d4L2in6ly6Un9ZKGhshJvG32zHsvTgUs2ZQlyF_II-eI1m10myq_TL147KdL0wTPrFTJupSLmKUkUmI0n56ZHjyv8NtlPbUSnKF_rCLi0N4smGkC1QW39gBE/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>

 #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/AVvXsEjn4lkkVv2U7t5R8dek6xtN8VOTMur5V9Szwu91RjeUvB-ot9GvKoOLpavjb-BuaeZvI5J_nnbANKJ6kCsiVqOTD-oXVBN_dgffDqNIjg5p1obIbUXIkInSx7GGvxhYgsuldp89VkNni54/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/AVvXsEjn4lkkVv2U7t5R8dek6xtN8VOTMur5V9Szwu91RjeUvB-ot9GvKoOLpavjb-BuaeZvI5J_nnbANKJ6kCsiVqOTD-oXVBN_dgffDqNIjg5p1obIbUXIkInSx7GGvxhYgsuldp89VkNni54/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>

 #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/AVvXsEgp7r4OB2lpl17jHHFAvlzbkDl76FtuhTpQ1t5Xnd9FhykGQB_8lpLNyUHgU7V0XwleVgnkRgxe9yrdJ637PU8fiNeKzW2ElymbX79VWvmgteH3D35LU8c0raS1Bbsc9ctbmPvaQUu5mv8/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/AVvXsEgp7r4OB2lpl17jHHFAvlzbkDl76FtuhTpQ1t5Xnd9FhykGQB_8lpLNyUHgU7V0XwleVgnkRgxe9yrdJ637PU8fiNeKzW2ElymbX79VWvmgteH3D35LU8c0raS1Bbsc9ctbmPvaQUu5mv8/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>

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

#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/AVvXsEiEBXTq4SG1NAjLDcd2wdgLSkO3cNeaRiinmyqtLoEguO88iz_Nnd8CW52Ebvnns4QEtSus2RBBZ4hdZ5yHLvddQ6RU6ypVQVE9cx_IvwNIMoZM1bJZrqCrAlBAoizLuS3qm8FMeoxFMEo/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/AVvXsEiEBXTq4SG1NAjLDcd2wdgLSkO3cNeaRiinmyqtLoEguO88iz_Nnd8CW52Ebvnns4QEtSus2RBBZ4hdZ5yHLvddQ6RU6ypVQVE9cx_IvwNIMoZM1bJZrqCrAlBAoizLuS3qm8FMeoxFMEo/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/AVvXsEiEBXTq4SG1NAjLDcd2wdgLSkO3cNeaRiinmyqtLoEguO88iz_Nnd8CW52Ebvnns4QEtSus2RBBZ4hdZ5yHLvddQ6RU6ypVQVE9cx_IvwNIMoZM1bJZrqCrAlBAoizLuS3qm8FMeoxFMEo/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>

 #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/AVvXsEjcUt76Zi0NMlnkWy5lKCKDqZNAsNbe1_vhC4z8iacj2UtWC_7t3jgKDLf25SUOMP2OQ-M1ORjdLIijSbhJ2ihQdVlFF9OsmFfFo_gGZzaO3NaZAotHuk15hOpbcS7kJFvVBhzKtjdKj2o/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/AVvXsEjcUt76Zi0NMlnkWy5lKCKDqZNAsNbe1_vhC4z8iacj2UtWC_7t3jgKDLf25SUOMP2OQ-M1ORjdLIijSbhJ2ihQdVlFF9OsmFfFo_gGZzaO3NaZAotHuk15hOpbcS7kJFvVBhzKtjdKj2o/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/AVvXsEjcUt76Zi0NMlnkWy5lKCKDqZNAsNbe1_vhC4z8iacj2UtWC_7t3jgKDLf25SUOMP2OQ-M1ORjdLIijSbhJ2ihQdVlFF9OsmFfFo_gGZzaO3NaZAotHuk15hOpbcS7kJFvVBhzKtjdKj2o/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>

#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/AVvXsEgjfd8S1KgNtgzSsM6iy0QmSqtrkfmugU-iaykbSKBl9IpvbijcEC9V2sdtRWS2c5OqkpL4fJ9YhBeS84rPqw-675EBPPtdDtxnANkr9d64sFdPmvgidupcx5dP317s8O-38WdpMjcqD8Y/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfd8S1KgNtgzSsM6iy0QmSqtrkfmugU-iaykbSKBl9IpvbijcEC9V2sdtRWS2c5OqkpL4fJ9YhBeS84rPqw-675EBPPtdDtxnANkr9d64sFdPmvgidupcx5dP317s8O-38WdpMjcqD8Y/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>

#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/AVvXsEhHRsffKXLBGTJf6kGsefQASYAXJeFPhTUuOWBm8OlahIRr475O4mv-1hScLCyvF0Vs9zA7Ca0hecglX7mxVS3osZTL3yq0JE1mBpv2FWNe5LoDkylvLRRYZfTgWpEDzxGXhsiP9fbpcKI/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHRsffKXLBGTJf6kGsefQASYAXJeFPhTUuOWBm8OlahIRr475O4mv-1hScLCyvF0Vs9zA7Ca0hecglX7mxVS3osZTL3yq0JE1mBpv2FWNe5LoDkylvLRRYZfTgWpEDzxGXhsiP9fbpcKI/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>

 #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/AVvXsEjeKdAnhk-OiTLIyCs_mA8ohdJTBmFLgngHJ5d9UlYK-kDxHmAEaZCirVULUKitetxzuHIrdf9xAGwofW6TdRm7dUwj6j8-OimjUsMd_ZUWUa3dK38QYLXmWxHNQ9VKkL5B4Sk5dpKot9U/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/AVvXsEjeKdAnhk-OiTLIyCs_mA8ohdJTBmFLgngHJ5d9UlYK-kDxHmAEaZCirVULUKitetxzuHIrdf9xAGwofW6TdRm7dUwj6j8-OimjUsMd_ZUWUa3dK38QYLXmWxHNQ9VKkL5B4Sk5dpKot9U/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/AVvXsEjeKdAnhk-OiTLIyCs_mA8ohdJTBmFLgngHJ5d9UlYK-kDxHmAEaZCirVULUKitetxzuHIrdf9xAGwofW6TdRm7dUwj6j8-OimjUsMd_ZUWUa3dK38QYLXmWxHNQ9VKkL5B4Sk5dpKot9U/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>

#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>

 #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/AVvXsEjWzt3RDvMqBayia2_z18Ri6niyYWkqA8MY9v1dSzHT7EZS2_enrw5HYBeMNzYf5QRCLFH2c4Zsf_jdnSGljY8saf8Od0_e6FquCHXsttZH8__MnVVlyPxrcgCpez16BGm9QLyyYbLAqMo/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/AVvXsEjWzt3RDvMqBayia2_z18Ri6niyYWkqA8MY9v1dSzHT7EZS2_enrw5HYBeMNzYf5QRCLFH2c4Zsf_jdnSGljY8saf8Od0_e6FquCHXsttZH8__MnVVlyPxrcgCpez16BGm9QLyyYbLAqMo/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/AVvXsEjWzt3RDvMqBayia2_z18Ri6niyYWkqA8MY9v1dSzHT7EZS2_enrw5HYBeMNzYf5QRCLFH2c4Zsf_jdnSGljY8saf8Od0_e6FquCHXsttZH8__MnVVlyPxrcgCpez16BGm9QLyyYbLAqMo/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>

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

#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/AVvXsEi_kodhfnCVG-8iDl8LzqP9OJUVOjWQ3StpqVpOE6elOcwKWJpbUADE89QYKW2VTCFAu9f8dDtafrWiVSmL96tJWIjyzHwc1SSbyJfXZaA08d_REwc9K-jiZTapLjs-ECCHT4XWU59fDU0/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_kodhfnCVG-8iDl8LzqP9OJUVOjWQ3StpqVpOE6elOcwKWJpbUADE89QYKW2VTCFAu9f8dDtafrWiVSmL96tJWIjyzHwc1SSbyJfXZaA08d_REwc9K-jiZTapLjs-ECCHT4XWU59fDU0/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>

#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>

 #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/AVvXsEjFNkKZN67ScKrN0wtRY91qu0jhAMadYDn1QY38NCTG8rwAShA6pFOZgtrJh7b4nmg_cs559I_g66vXB0jfvNwOPtUxEMHa9AEaf9melKWZgcqHZ1Uxne7B88U77209K4LBuQjkXDy8eDk/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNkKZN67ScKrN0wtRY91qu0jhAMadYDn1QY38NCTG8rwAShA6pFOZgtrJh7b4nmg_cs559I_g66vXB0jfvNwOPtUxEMHa9AEaf9melKWZgcqHZ1Uxne7B88U77209K4LBuQjkXDy8eDk/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>

#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/AVvXsEhMJInwkGQxbPoBDdssGmgYNjfuGDv3Vn4BQgr9vtghZ2Txkwmn4q1-7YFd3mR209y7C4O-S51RUph19fqPWzZSgLRV_18J0T5uzQ5jKR1l9ntKu-y2-KMd-l2yygYn9JnZgOOj9DK9cWs/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJInwkGQxbPoBDdssGmgYNjfuGDv3Vn4BQgr9vtghZ2Txkwmn4q1-7YFd3mR209y7C4O-S51RUph19fqPWzZSgLRV_18J0T5uzQ5jKR1l9ntKu-y2-KMd-l2yygYn9JnZgOOj9DK9cWs/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>

 #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>

#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/AVvXsEjt2bzT8AAqAbc-GoXLUsQE33upguWPY8v9AFUNdNT6kULc9W8xEFnZpsaH-fydl234rJPj89-JZZ7YfbmDrHDjAas8Vn3Ki6y-7tTdOzw57nhk1zXWaVv4U-4_HeHAwMuYj6Tr-BWzZCA/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/AVvXsEjt2bzT8AAqAbc-GoXLUsQE33upguWPY8v9AFUNdNT6kULc9W8xEFnZpsaH-fydl234rJPj89-JZZ7YfbmDrHDjAas8Vn3Ki6y-7tTdOzw57nhk1zXWaVv4U-4_HeHAwMuYj6Tr-BWzZCA/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/AVvXsEjt2bzT8AAqAbc-GoXLUsQE33upguWPY8v9AFUNdNT6kULc9W8xEFnZpsaH-fydl234rJPj89-JZZ7YfbmDrHDjAas8Vn3Ki6y-7tTdOzw57nhk1zXWaVv4U-4_HeHAwMuYj6Tr-BWzZCA/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>

#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/AVvXsEitKfNbG477e9kwHXLdOV737g7Bb42qNBUU5Fjz-rdc1Pr9Bo5m03v6dKpeFR9FX8K9ATTbv0L8Zg0aWvynLWyNKSdx0K3kTzs1aDrzxEDTobgxor0E1ZReX_z0BPVQ0wtRbjxjV7-8YWM/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKfNbG477e9kwHXLdOV737g7Bb42qNBUU5Fjz-rdc1Pr9Bo5m03v6dKpeFR9FX8K9ATTbv0L8Zg0aWvynLWyNKSdx0K3kTzs1aDrzxEDTobgxor0E1ZReX_z0BPVQ0wtRbjxjV7-8YWM/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>

#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/AVvXsEga5J2x8d7kOlVxHIjyS5lktG-KJtp1D6jS73J8qjbZT0i9kSER6B3XbMeQtAT88uzELrl2EZrZXUV7lRK5KnWKD5JMKk-Oz0Eb3DMPvArQM6CCaXvs3WXZHeOSC1mmW3aKPmVCVCr6f0E/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/AVvXsEga5J2x8d7kOlVxHIjyS5lktG-KJtp1D6jS73J8qjbZT0i9kSER6B3XbMeQtAT88uzELrl2EZrZXUV7lRK5KnWKD5JMKk-Oz0Eb3DMPvArQM6CCaXvs3WXZHeOSC1mmW3aKPmVCVCr6f0E/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/AVvXsEga5J2x8d7kOlVxHIjyS5lktG-KJtp1D6jS73J8qjbZT0i9kSER6B3XbMeQtAT88uzELrl2EZrZXUV7lRK5KnWKD5JMKk-Oz0Eb3DMPvArQM6CCaXvs3WXZHeOSC1mmW3aKPmVCVCr6f0E/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>

 #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/AVvXsEgmUO7IE99dMkPQ0aomYIWPNx5dtEYlUGV1cGy-XocipgfpKQ-eqx0z-MyYD6sT6Fr9fJisW8sR_a9wNvAR1pQWxKe5VDjh1xsXHbrO6e9mEBPePZj357MP-CWL1F-s-vTEDjGsIFkkNaQ/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUO7IE99dMkPQ0aomYIWPNx5dtEYlUGV1cGy-XocipgfpKQ-eqx0z-MyYD6sT6Fr9fJisW8sR_a9wNvAR1pQWxKe5VDjh1xsXHbrO6e9mEBPePZj357MP-CWL1F-s-vTEDjGsIFkkNaQ/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>

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

 #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/AVvXsEhVeGTdAbsBiubNosnlwV-ueL2IwfCsnoZREBG7M_IwDrzhYxgck3yrywiykTYzQqrXSE6on4mNYrnAKJdtUGLIjwizE70eBDP4KLegKwTW5MMC-q881-cYGsU-Vk6s7JNpCZMGlfrumY4/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeGTdAbsBiubNosnlwV-ueL2IwfCsnoZREBG7M_IwDrzhYxgck3yrywiykTYzQqrXSE6on4mNYrnAKJdtUGLIjwizE70eBDP4KLegKwTW5MMC-q881-cYGsU-Vk6s7JNpCZMGlfrumY4/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>