Membuat menu dropdown disertai background

Iseng- iseng blogwalking saya menemukan tutorial ini dari blognya kang rohman.
Menu dropdown ini terdapat background di belakangnya, kemudian apabila menu ersebut diklik akan muncul submenu-submenunya.

Untuk demonya silahkan lihat Disini

Kalau ingin membuat menu seperti pada demo yang saya berikan tadi, silahkan anda ikuti langkah- langkah di bawah ini:
1. login ke akun blog anda
2. klik menu rancangan
3. pilih edit HTML, lalu centang checklist disamping tulisan expand widget templates

4. cari kode <title><data:blog.pageTitle/></title> setelah itu pastekan kode ini di bawahnya:

<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>

5. Kemudian cari kode ]]></b:skin>
Setelah ketemu pastekan kode ini diatas ]]></b:skin>:

.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;

padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');

text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;

color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;

}


a{cursor: hand}

6. Simpan template

Eitts, belum selesai masih ada lagi. Kita beralih ke menu rancangan lagi, klik Tambah Gadget

pilih HTML/Javascript, masukkan kode di bawah ini:

<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>
<div id="ogahku1" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>>
<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>

<div id="ogahku2" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>
<div id="ogahku3" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>

<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>
<div id="ogahku4" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>

klik tombol simpan
Ganti tanda # dengan url yang ingin anda pasang. Ganti juga Link 1 di sini dengan nama link url tersebut