Membuat Top Dropdown Menu di WordPress

Drop down menu adalah tampilan menu yang memiliki tingkatan di bawahnya ketika pointer mouse kita letakkan atau kita arahkan di atas tulisan menu yang kita pilih. Dapat juga disebut dengan multi-leverl-navigation. Jadi, ketika mouse diarahkan di atasnya maka akan muncul sub dari menu utama tadi.

Untuk awal buka file header.php
copy dan paste kode berikut :

 <div id="menu">
 <ul> 
 <li><a href="<?php bloginfo('url');?>">Home</a></li> 
 <?php wp_list_categories('title_li='); ?>
 </ul>
 </div>
   
"<li><a href="<?php bloginfo('url');?>">Home</a></li>"  
ini untuk menampilkan halaman default blog kamu
"<?php wp_list_categories('title_li='); ?>" 
ini untuk menampilkan halaman berdasarkan Kategori blog kamuz

Selanjutnya buka file style.css
copy dan paste kode dibawah ini :
#menu {
 margin-top:2px;
 /*background:#000 url(images/img04.jpg) left repeat*/;
 border-bottom: #ff3b97 solid 5px;
 border-top: #ccc solid 1px;
 height:30px; 
 text-shadow: 3px 3px 6px #aaa; 
 width: 100%; 

}

#menu ul { 
 margin: 0; 
 list-style: none; 
 display: block; 
}

#menu li , #menu li a{ 
 float: left; 
 position: relative; 
 margin-right:10px;
 color:#000; 
 text-decoration: none; 
 display: block;
} 

#menu .menu-header, 
div.menu { 
 width: 100%; 
}

#menu .menu-header ul, 
div.menu ul { 
 list-style: none; 
 margin: 0; 
}

#menu .menu-header li, 
div.menu li { 
 float: left; 
 position: relative; 
}

#menu a { 
 color: #000; 
 display: block; 
 line-height: 30px; 
 padding:0 5px 0 5px; 
 text-decoration: none;
}

#menu ul ul { 
 display: none; 
 position: absolute;
 margin-top:30px;
 left: 0; 
 float: left; 
 width: auto; 
 z-index: 99999; 
}

#menu ul ul li { 
 min-width: 180px; 
}

#menu ul ul ul { 
 left: 30px; 
 top: 35px; 
}

#menu ul ul a { 
 background: #000000; 
 line-height: 1em; 
 padding: 10px; 
 width:auto; 
 height: auto; 
}

#menu li:hover > a, 
#menu ul ul :hover > a { 
 background: #ff3b97; 
 color: #fff;
 text-shadow: 3px 3px 6px #000; 
}

#menu ul li:hover > ul { 
 display: block; 
}


Maka hasilnya akan terlihat seperti dibawah ini :

Membuat Top Dropdown Menu di WordPress