Cara Membuat menu drop down versi 2

dipostingan sebelumnya saya pernah memberi tahu cara membuat menu drop down disini
dan sekarang saya akan memberi tahu cara membuat menu drop down yang baru..!

tapi sebelum mencoba tutorial kamu harus menggunakan blog ujicoba kamu jika kamu kurang yakin..! :) dan gunakan template yang lengkap supaya code yang dicari sesuai dengan tutorial ini
tapi ada juga sebagian template tidak cocok dipasang menu seperti ini, jadi pilih template yang dari awal sudah memiliki menu jadi kamu dapat menghapusnya code menunya dan kamu ganti dengan code menu dibawah ini.

seperti biasa terlebih dahulu login ke blog mu, kemudian masuk ke tata letak edit Html

letakkan code CSS berikut tepat diatas code ]]></b:skin>]

}

#nav a:hover{
background-color:#333;
}

#nav li{
float:left;
position:relative;
padding:0px 5px;
}

#nav ul {
position:absolute;
display:none;
width:12em;
top:100%;
left:0;
}

#nav li ul a{
width:12em;
height:auto;
float:left;
}

#nav ul ul{
top:auto;
}

#nav li ul ul {
left:13em;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

setelah kamu letakkan code diatas sekarang kamu cari code ini

</b:section>
</div>


letakkan code berikut dibawah nya

<!-- Menu HTML -->
<ul id='nav'>
<li><a href='/'>Home;</a></li>
<li><a href='#'>Menu 1;</a>
<ul>
<li><a href='#'>edit sendiri &#187;;</a>
<ul>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
</ul>
</li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
</ul>
</li>
<li><a href='#'>Menu 2 ;</a>
<ul>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
</ul>
</li>
<li><a href='#'>Menu 3 &#9617;</a>
<ul>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
</ul>
<li><a href='#'>edit sendiri</a>
<ul>
<li><a href='#'>edit sendiri</a></li>
<li><a href='#'>edit sendiri</a></li>
</ul>
</li>
</li> <div class='clear'/>
</ul>

dan kemudian save dan lihat hasilnya...!!

gini hasilnya :

Gambar Menu Sebelum di edit

yang ini sesudah di edit

kamu dapat menambah menunya sesuka hati, dan perlu diketahui untuk membuat penunjuk atau arah panah seperti yang sudah saya screenshot kamu bisa baca disini

gimana tertarik membuatnya ayo langsung buat, mudah-mudahan berhasil :)

selamat mencoba...!


Sumber : Buat Sendiri.....!