Dropdown Menu

Disini saya akan Posting bagaimana cara membuat Dropdown Menu..
copy paste kode berikut
request teman saya Arum :)
Enjoy It !!

<?php //start menu-menu drop dengan kategori, pages, archive, rss?> <?php //style css dibawah langsung saya masukan ke dalam tag body, sobat bisa memindakan style cssnya kedalam tag head //sobat juga bisa merubah style cssnya, sobat bisa mengedit semuanya atau ubah yang saya beri komentar // yang terpenting adalah ganti warnanya.red, lime, yellow, black, silakan ganti dengan warna lain! ?> <?php //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head> ?> <style type="text/css"> #menudrop{ background-color:lime; /* warna background utama , silakan ganti dengan value lain */ padding:0; margin-top:1px; /* jarak luar atas, silakan ganti dengan value lain */ margin-bottom:1px; /*jarak luar bawah , silakan ganti dengan value lain */ margin-left:1px; /* jarak luar kiri , silakan ganti dengan value lain */ margin-right:1px; /* jarak luar kanan , silakan ganti dengan value lain */ overflow:hidden; font-family:times; /* warna background utama , silakan ganti dengan value lain */ font-size:18px; /* ukuran font, silakan ganti dengan value lain */ font-weight:bold; /* ketebalan font, silakan ganti dengan value lain */ width:100%; /*lebar background belakang , silakan atur lebarnya */ -moz-border-radius:5px; /* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */ text-transform:capitalize; } #menudrop a{text-decoration:none;} #menustyle{margin:0;padding:0;} #menustyle ul{ float:left; list-style:none; margin:0; padding:0;} #menustyle li{list-style:none; margin:0;padding:0;} #menustyle li a, #menustyle li a:link, #menustyle li a:visited{ background:yellow;/* warna background link, silakan ganti dengan value lain */ color:black;/* warna text link, silakan ganti dengan value lain */ display:block; padding:14px 10px 13px 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */ -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */ } #menustyle li a:hover, #menustyle li a:active{ background-color:red;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */ color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */ margin:0; -moz-border-radius:4px; } #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{ width:350px; /* lebar link-link yang ngedrop, silakan ganti dengan value lain */ float:none; margin:0; font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */ } #menustyle li{float:left;padding:0;} #menustyle li a.enclose, #menustyle li a.enclose:visited{border-top:1px solid white;} #menustyle li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;} #menustyle li ul a{width: 140px;} #menustyle li ul ul{margin:-75px 0 0 171px;} #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{left:-999em;} #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul, #menustyle li li li.sfhover ul{left:auto;} #menustyle li:hover, #menustyle li.sfhover{position:static;} </style> <?php //end, sampai disini style cssnya?> <?php //mulai dari sini adalah menu-menunya?> <div id='menudrop'> <ul id='menustyle'> <li><a href='<?php bloginfo('url'); ?>/'>home</a></li> <li><a href='javascript:void(0)'>pages</a> <ul> <?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?> </ul></li> <li><a href='javascript:void(0)'>category</a> <ul> <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?> </ul></li> <li><a href='javascript:void(0)'>archive</a> <ul> <?php wp_get_archives('type=monthly'); ?> </ul></li> <li><a href='javascript:void(0)'>rss</a> <ul> <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li> </ul></li> <li><a href='javascript:void(0)'>other link</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li> </ul></li> <li><a href='javascript:void(0)'>other link 2</a> <ul> <li><a href='javascript:void(0)'>other link 2 a</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 4</a></li> </ul> </li> <li><a href='javascript:void(0)'>other link 2 b</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li> </ul> </li> <li><a href='javascript:void(0)'>other link 2 c</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 6</a></li> </ul> </li> <li> <a href='javascript:void(0)'>other link 2 d</a> <ul> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 1</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 2</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 3</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 4</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 5</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 6</a></li> <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 7</a></li> </ul> </li> </ul> </li> <li><a href='javascript:void(0)'>other link 3</a><ul><?php //yang dibawah hanya contoh ?> <li><a href='http://www.ferdianz.co.tv' target="_blank">Ur Text</a></li> <li><a href='http://www.ferdianz.co.tv'>Ur Text</a></li> <li><a href='http://www.ferdianz.co.tv'>bisa diganti ?>ferdianz</a></li> </ul> </li> </ul> </div> <?php //sampai sini adalah menu-menunya?> <?php //sobat juga dapat mengganti linknya, ganti href='javascript:void(0)' dengan link lain kemudian sesuaikan //salam kenal dari www.ferdianz.co.tv ?> <?php //end menu-menu drop dengan kategori, pages, archive, rss?>