Membuat Horizontal Menu Dropdown

Karna kemarin ada teman saya yang request minta di buatin cara buat menu turun (dropdown), nah ku kasi tau caranya nih..

Vertikal Menu Dropdown

oke.. tanpa harus banyak bicara...
kita langsung aja... :)

1. Pertama pilih template kemudian edit html
2. kita harus meletakkan kode css ini sebelum tag </head> ( untuk mencari tag tersebut gunakan menu find / Ctrl+F )

______________________________________________________________
<style type="text/css" media="screen">
#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background-image:url(http://1.bp.blogspot.com/-A-8fq3xiuAQ/Tth-DcBVD1I/AAAAAAAAA7c/jQse_J--l9g/s1600/bg.png);
}

#nav a {
    display: block;
    text-decoration:none;
    color:#FFFFFF;
}
#nav a:hover {
    display: block;
    text-decoration:underline;
   
}
#nav li {
border-left: 1px dotted;
border-right: 1px dotted;
    float: left;
    width: 150px;
    height: 30px;
    text-align:center;
    padding-top: 10px;
    background-image:url(http://1.bp.blogspot.com/-A-8fq3xiuAQ/Tth-DcBVD1I/AAAAAAAAA7c/jQse_J--l9g/s1600/bg.png);
    }
#nav li ul {
    position: absolute;
    top:48px;
    left: 0px;
    border: 2px;
    width: 115px;
    left: -999em;
}
#nav li:hover {
    left: auto;
    background-image:url(http://4.bp.blogspot.com/-wD-RDS_0Vvw/Tth-DdKjHkI/AAAAAAAAA7g/dQp5AfeU4NA/s1600/bg2.png);
}
#nav li:hover ul {
    left: auto;
    background-image:url(http://4.bp.blogspot.com/-wD-RDS_0Vvw/Tth-DdKjHkI/AAAAAAAAA7g/dQp5AfeU4NA/s1600/bg2.png);
}
#nav li ul ul {
    left:12em;
    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;
    }
</style>
______________________________________________________________
Keterangan : 
- Warna hijau adalah gambar dasar menu kita..
- Warna merah adalah gambar yang aktif ketika menu tersebut dilewati mouse..
- anda dapat mengubah gambar tersebut dengan gambar anda sendiri
______________________________________________________________
3. Simpan template tersebut.
4. Selanjutnya klik tata letak kemudian klik tambah gadget kemudian pilih HTML/JavaScript
5. Masukkan Kode di bawah ini sebagai konten HTML/JavaScript tersebut.
______________________________________________________________

<ul id="nav">

   <!-- Copyright 'http://yuka-dwi-bantara.blogspot.com/'. -->
    <li><a href="http://yuka-dwi-bantara.blogspot.com/">Home</a>
    </li>
    <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Tutorial</a>
        <ul>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Web Design</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Visual Design</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Programming</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Networking</a></li>
        </ul>
    </li>
    <li><a href="http://yuka-dwi-bantara.blogspot.com/#">About</a>
    </li>
    <li><a href="http://yuka-dwi-bantara.blogspot.com/#">New Post</a>
        <ul>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Post 1</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Post 2</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Post 3</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Post 4</a></li>
            <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Post 5</a></li>
        </ul>
    </li>
    <li><a href="http://yuka-dwi-bantara.blogspot.com/#">Contact Me</a>
    </li>
    <!-- etc. -->
</ul>
______________________________________________________________
Keterangan :
- Warna Biru dapat anda ubah menjadi link anda sendiri.
______________________________________________________________
6. anda dapat meletakkan gadget tersebut dimanapun anda mau. kemudian langkah terakhir adalah Simpan dan Lihat blog anda.



Hasil Akhir :

Selamat Mencoba..

______________________
Yuka db : "Possibility is Infinity"