membuat dropdown menu dengan css

Ada lagi cara untuk mempercantik tampilan menu pada blog agan,yaitu dengan cara membuat menu dropdown dengan menggunakan css.agan lihat gambar di bawah ini,

Berikut cara membuatnya,

Masuklah keblog agan,kemudian pilih rancangan,pilih tambah gadget yang ada di bawah header,kemudian pilih HTML/JavaScript.lalu copy paste tag html di bawah ini,


<div id="menugua">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>

ganti  teks yang berwarna merah diatas dengan link punya agan,dan ganti teks yang warna biru dengan menu punya agan,

contoh,


<div id="menugua">
<ul>
<li><a href="http://studytrial.blogspot.com/">home</a>
<ul>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-accoun-gmail.html">membuat account gmail</a></li>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-blog.html">membuat blog</a></li>
<li><a href="http://studytrial.blogspot.com/2011/07/membuat-dropdown-menu-dengan-css.html">membuat dropdown menu dengan css</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>


kemudian simpan,setelah itu pilih perancang template,lihat gambar di bawah,

maka tampilan akan menjadi seperti di bawah ini,

pilih advance,lalu geser scroll ke bawah,pilih add css,kemudian copy paste tag css dibawah ini,

#menugua ul {
list-style: none;
}
#menugua li {
float: left;
}
#menugua ul ul {
visibility:hidden;
width:144px;
}
#menugua ul li:hover ul,
#menugua ul a:hover ul{
visibility:visible;
}
#menugua li a {
background-color:#000000;
height: 1em;
width: 100px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}

klik apply to blog di bagian sisi kanan atas,nah,,, sekarang hasilnya sudah bisa agan lihat.

Selamat mencoba,teruslah menulis artikel yang bermanfaat.