Pada tutorial kali ini, saya akan memberikan cara membuat menu drop down.
Apa itu menu drop down.
lihat ni dulu.
dari pada penasaran, langsung aja.
pertama login blogger, kemudian buka template>edit HTML, jangan lupa beri centang pada Expand Template Widget. setelah itu cari
kode <div class='main-outer'> (biar lebih gampang tekan Ctrl+f), jika sobat tidak bisa menemukan kode di atas coba cari kode <div id='main-wrapper'> atau <div id='main'>, jika masih tidak di temukan, artinya template sobat tidak cocok dengan cara ini. setelah sobat menemukan kode tersebut, lalu sobat paste kan kode di bawah ini di atas kode tadi.
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#959595;margin:0;padding:0;height:35px;width:760px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #9E9E9E 0px 1px 0px;border-right:1px solid #717171;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#5e5e5e; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#717171; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#717171; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #5e5e5e; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
<li><a href='#'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub menu 1</a></li>
<li><a href='#'>Sub menu 2</a></li>
<li><a href='#'>Sub menu 3</a></li>
</ul>
</li>
</ul>
</div>
Merah : Atur ukuran
Biru : Ganti dengan URL sobat
Kuning : Ganti dengan judul yang sobat mau
Sekian tutorial dari saya. jikalau tutorial ini bermanfaat jangan lupa tinggalkan jejak, dan kalau ada yang mau di tanyakan, silahkan tanya di kolom komentar :D
