Membuat Menu Custom Dropdown

Bismillah
kali ini kita akan belajar cara membuat menu sendiri, jadi bisa kita edit sesuka kita, tampilannya juga bisa kita ganti2, seperti yg di bawah ini.... gmana???

• Home
• Facebook
• Yahoo!
• Twitter
• Youtube

lihat menu di atas?? sepertinya biasa aja, tapi sebenarnya Menu diatas merupakan contoh Menu Drop-Down Unik...
Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
Tertarik untuk memasangnya?
Oke Langsung saja Copy Paste kode nya dibawah ini dan taruh di sidebar, caranya bisa kamu baca di " cara memasang html di sidebar"
untuk kodenya, silahkan ganti yang berwarna biru  dengan url/alamat link kamu. untuk yanga hijau, silahkan ganti dengan judul menu yg kamu inginkan

<!--Menu Drop-Down Unik-->

<center><div id="menu">

<ul>

<li><a class="current" href="http://santri-one.blogspot.com">Home</a></li>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://id.yahoo.com">Yahoo!</a></li>

<li><a href="http://twitter.com">Twitter</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul>

</div></center>

<style>

*{

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pcdN-guCc93y1jZMUIHRLBWKaE0axUl9v0Qf8F3g5xGUUVuG2VwukGXjH0cyOovnG4SZ6IODKw6jmlfcFg3krF2oIJsjrcVdsvqExbiIhKCa0JNvpjP6AqFFCJaQEm6gjjmXm2GIzGs/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:193px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jE3LBT9ivd0G8O3TkveREYuRqYJk6DKbogNK8gNQ970J1A5lmg5IN7hzdvixTA9nsNGUMVOKcOTjbPJasgDE9vS-2BhVKndP8A7apnVLhcB_3Aq0yaFWuHA7rE53kY9bfol09RmdoXy-/) no-repeat left center;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.5em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

</style>

<!--santri-one.blogspot.com-->

salam sahabat blogger dari santri-one

Jangan Lupa Baca yang ini Lho yach..: