Simple Drop Down Menu

namia bagi tau cara dye based pada apa yang namia buat yer..disebabkan namia tak bape nk reti adjust code-code nih.. so background tuk menu nih namia x ubah.. hehe.. all da best!!

Langkah-langkahnya:

Pergi ke Design n klik Edit HTML

Letakkan code dibawah sebelum perkataan ]]></b:skin>

/* ----- NAVBAR MENU ----- */

#NavbarMenu {

width: 940px;

height: 35px;

background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtQap-jPQAysOlJB7tm203NQzQxfPgmCrUkwuWeBFIcyMnI9iQj3_f4wXi0UcLWwbTjPE31kCIbgwLxog6oX62zF_zwBaguQLN9vSb2vlhmGXebhftGKYPUKdfoflDwjaVJRCqc1vdSty/s800/navbar.gif) repeat-x top;

color: #3D81EE

margin: 0 auto 0;

padding: 0;

font: bold 11px Arial, Tahoma, Verdana;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;

}

#NavbarMenuleft {

width: 680px;

float: left;

margin: 0;

padding: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

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

color: #3D81EE;

display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover, #nav li a:active {

background:#99C9FF;

color: #3D81EE;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

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

background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtQap-jPQAysOlJB7tm203NQzQxfPgmCrUkwuWeBFIcyMnI9iQj3_f4wXi0UcLWwbTjPE31kCIbgwLxog6oX62zF_zwBaguQLN9vSb2vlhmGXebhftGKYPUKdfoflDwjaVJRCqc1vdSty/s800/navbar.gif) repeat-x top;

width: 150px;

color: #000;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #99C9FF;

border-left: 1px solid #99C9FF;

border-right: 1px solid #99C9FF;

font: normal 14px Georgia, Times New Roman;

}

#nav li li a:hover, #nav li li a:active {

background: #99C9FF;

color: #3D81EE;

padding: 7px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

Kemudian, cari code nih pulak

<div id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

Kemudian letak code dibawah selepas code diatas

<div id='NavbarMenu'><ul id='nav'><li><a expr:href='data:blog.homepageUrl'>Hadapan</a></li><li><a href='#'>Contoh 1</a><ul><li><a href='#'>Contoh 1a</a></li><li><a href='#'>Contoh 1b</a></li><li><a href='#'>Contoh 1c</a></li><li><a href='#'>Contoh 1d</a></li><li><a href='#'>Contoh 1e</a></li></ul></li><li><a href='#'>Contoh 2</a><ul><li><a href='#'>Contoh 2a</a></li><li><a href='#'>Contoh 2b</a></li><li><a href='#'>Contoh 2c</a></li><li><a href='#'>Contoh 2d</a></li><li><a href='#'>Contoh 2e</a></li></ul></li><li><a href='#'>Contoh 2</a><ul><li><a href='#'>Contoh 2a</a></li><li><a href='#'>Contoh 2b</a></li><li><a href='#'>Contoh 2c</a></li><li><a href='#'>Contoh 2d</a></li><li><a href='#'>Contoh 2e</a></li></ul></li><li><a href='#'>Contoh 3</a><ul><li><a href='#'>Contoh 3a</a></li><li><a href='#'>Contoh 3b</a></li><li><a href='#'>Contoh 3c</a></li></ul></li><li><a href='#'>Contoh 4</a><ul><li><a href='#'>Contoh 4a</a></li><li><a href='#'>Contoh 4b</a></li><li><a href='#'>Contoh 4c</a></li></ul></li></ul></div>

Kalau nak tambah sub menu untuk contoh 4 misalnya, cuma letakkan <li><a href='#'>Contoh 4d</a></li>

sebelum </ul>
<li><a href='#'>Contoh 4</a>
<ul>
<li><a href='#'>Contoh 4a</a></li>
<li><a href='#'>Contoh 4b</a></li>
<li><a href='#'>Contoh 4c</a></li>
<li><a href='#'>Contoh 4d</a></li>
</ul></li>

Sekiranya ingin menambah menu lagi misalnya nak tambah contoh 5 misalnya, cuma tambah
<li><a href='#'>Contoh 5</a>
<ul>
<li><a href='#'>Contoh 5a</a></li>
<li><a href='#'>Contoh 5b</a></li>
</ul>
</li>

Sebelum  code berwarna hijau tadi (</ul>)

Tukar # kepada link yg korang nak, cam saya letak link bagi labels entry kat blog nih, dan perkataan contoh 1, contoh 2 tu tukar la ikut suka korang eik. 


n kalo korang nak lebih power, boleh la try kta sini


kalo tak paham, boleh la tanye yer..