Cara Membuat Menu Drop Down

My Deny

1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.

2. Centang Expand Template Widget.

3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.

4. Cari kode : ]]></b:skin>

Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.

5. Letakkan kode dibawah ini diatas kode tersebut.

/*--Navigasi Dropdown Menu--*/
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:950px;
height:auto;
margin:0;
padding:0;
}
#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:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:blue; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:180px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}

----------------------------------------------------------------------------------

Anda bisa merubah atau mengedit kode CSS yang ditunjukkan warna merah sesuai dengan kondisi template anda.

6. Kemudian cari kode: <div id='header-wrapper'>

7. Masukkan kode dibawah ini sebelum kode berikut:

<ul id='navdropdownmenu'>
<li><a href='Link anda'>Home</a></li>
<li><a href='Link anda'>Nama link anda</a></li>
<li><a href=''>Semester</a>
<ul>
<li><a href='Link anda'>/ </a>Nama link anda</li>
<li><a href='Link anda'>/ </a>Nama link anda</li>
<li><a href='Link anda'>/ </a>Nama link anda</li>
</ul>
</li>
<li><a href='Link anda'></a>Nama link anda</li>
<li><a href='Link anda'></a>Nama link anda</li>
</ul>

7. Jangan Lupa Simpan Template ok...