Membuat Menu Drop Down

Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........

1.  Cari kode berikut ]]></b:skin>
2.  Lalu letakkan kode berikut ini.

#navdropdownmenu{

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_ukJGVpjafXg4GRalyD3ncPY-NNxxMifX-ivWfq2TuA3X6P5UONihkryhHPtiN5mqytZ_egHe5igAGUhIL09rN_MDaEKZtgVNtdLZdV4h-dlNeAc3973P3hCnQxshOTQkJrD-TNJ3eFx/s800/navbar.gif) repeat-x top;

width:700px;

height:auto;

margin:0;

padding:0;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;

}

#navdropdownmenu ul{

float:left;

list-style:none;

margin:0;

padding:0;

}

#navdropdownmenu li{

list-style:none;

float:left;

}

#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{

color:#000000;

font-weight:bold;

display:block;

text-shadow: 0px 1px 1px #fff;

padding:9px 10px 9px 10px;

font-size: 12px;

font-family: verdana;

text-decoration:none;

}

#navdropdownmenu li a:hover{

background:#9f9f9f;

color:#ffffff;

}

#navdropdownmenu li ul{

z-index:10;

position:absolute;

height:auto;

width:200px;

visibility:hidden;

}

#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{

float:none;

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_ukJGVpjafXg4GRalyD3ncPY-NNxxMifX-ivWfq2TuA3X6P5UONihkryhHPtiN5mqytZ_egHe5igAGUhIL09rN_MDaEKZtgVNtdLZdV4h-dlNeAc3973P3hCnQxshOTQkJrD-TNJ3eFx/s800/navbar.gif) repeat-x top;

width:200px;

border-width:1px;

border-style:solid;

border-color:#575757;

}

#navdropdownmenu li ul li a:hover{

background:#000000;

color:#ffffff;

}

#navdropdownmenu li:hover ul{

left:auto;

visibility:visible;
}

Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.

3.  Cari kode yang mirip dengan kode dibawah.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/>

</b:section>

</div>

4.  Dibawahnya, ketikkan kode berikut.

<div id='navdropdownmenu'>

<ul id='navdropdownmenu'>

<li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>

<ul>

<li><a href='#'>Don&#39;t Know Why</a></li>

<li><a href='#'>Feelin The Same Way</a></li>

<li><a href='#'>Come Away With Me</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>

<ul>

<li><a href='#'>Englishman In Newyork</a></li>

<li><a href='#'>Shape Of My Heart</a></li>

<li><a href='#'>Fields Of Gold</a></li>

<li><a href='#'>If I Ever Lose My Faith In You</a></li>

<li><a href='#'>Fragile</a></li>

<li><a href='#'>Desert Rose</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>

<ul>

<li><a href='#'>Smooth Operator</a></li>

<li><a href='#'>Kiss Of Life</a></li>

<li><a href='#'>Your Love Is King</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>

<ul>

<li><a href='#'>That I Would Be Good</a></li>

<li><a href='#'>Front Row</a></li>

<li><a href='#'>One</a></li>

</ul>

</li>

<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>

<ul>

<li><a href='#'>Dindi</a></li>

<li><a href='#'>Venus</a></li>

<li><a href='#'>Red Light</a></li>

<li><a href='#'>The One</a></li>

<li><a href='#'>Circle Game</a></li>

<li><a href='#'>Aqua de Beber</a></li>

</ul>

</li>
</ul>
</div>

Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.

5.  Klik Simpan Template.

6.  Lihat hasilnya.

About Me