Cara buat Dropdown Menu blog HTML

tombol Menu blog sangat penting untuk mengakses pengunjung agar mudah mencari informasi pada blog.

- Masuk ke dasbor blog

- Klik Tata Letak

- kemudian  tambahkab gadget

lihat...!!!

akan muncul gambar spt berikut..

setelah muncul seperti gambar disamping lalu klik HTML/JavaScript

kemudian masukan Kode berikut !!!

<style> /*Start Css Menu*/ .menu { border: none; border: 0px; margin: 0px; padding: 0px; font-family: verdana,geneva,arial,helvetica,sans-serif; font-size: 14px; font-weight: bold; color: 8e8e8e; } .menu ul { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMc_XCawE8qrRKrhGosxc9Ulk-KBMs0WqJlQVR8wvUBETRCIQN5CEyMflBF2RJyEtJJ3RXauz6r6GYwV7j4a0q6X4SSG3ddHRcPhVR6wdp6m6zZiNsSsm8ZYLvSmlFe1KxKuHsbSJcmU8/s1600/helperblogger.com-menu-bg.gif) top left repeat-x; height: 43px; list-style: none; margin: 0; padding: 0; } .menu li { float: left; padding: 0px 8px 0px 8px; } .menu li a { color: #666666; display: block; font-weight: bold; line-height: 43px; padding: 0px 25px; text-align: center; text-decoration: none; } .menu li a:hover { color: #000000; text-decoration: none; } .menu li ul { background: #e0e0e0; border-left: 2px solid #a80329; border-right: 2px solid #a80329; border-bottom: 2px solid #a80329; display: none; height: auto; filter: alpha(opacity=95); opacity: 0.95; position: absolute; width: 225px; z-index: 200; /*top:1em; /*left:0;*/ } .menu li:hover ul { display: block; } .menu li li { display: block; float: none; padding: 0px; width: 225px; } .menu li ul a { display: block; font-size: 12px; font-style: normal; padding: 0px 10px 0px 15px; text-align: left; } .menu li ul a:hover { background: #949494; color: #000000; opacity: 1.0; filter: alpha(opacity=100); } .menu p { clear: left; } .menu #current { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia20oZQp-HUawGb_XGBP3BnuXe09V4NkWNb4iq86HXb3wIyordGI2jG8GQIIq-oGKamYL5BSGtroLaV0Ah6FK0XkHivYSEjs17Ei7o2T_iMZMY2RQ63_Co3OKNfvCEpXKeJXXpIr9tpA4/s1600/helperblogger.com-current-bg.gif) top left repeat-x; color: #ffffff; } /*End Css Menu from http://www.helperblogger.com/*/ </style> <div class="menu"> <ul> <li><a href="#" id="current">Home</a></li> <li><a href="#">Download</a> <ul> <li><a href="http://cirebonnewsdot.blogspot.com/2014/07/download-tarling-cirebon-yoyo-suwaryo.html">Lagu Tarling Lawas</a></li> <li><a href="#">Murotal MP3</a></li> <li><a href="#">Rock 90an MP3</a></li> <li><a href="#">Rock 90an MP3</a></li> <li><a href="#">Aplikasi</a></li> </ul> </li> <li><a href="#">Pendidikan</a> <ul> <li><a href="#">NUPTK</a></li> <li><a href="#">CPNS</a></li> <li><a href="#">Sertifikasi</a></li> <li><a href="#">Informasi Umum</a></li> </ul> </li> <li><ahref="#">Kontak</a> <ul> <li><a href="https://www.facebook.com/cirebonbusiness?ref=hl">Facebook Bisnis</a></li> <li><a href="https://www.facebook.com/organdangdutcirebon?ref=hl">Facebook Seni Cirebon</a></li> <li><a  href="#">Twiter</a></li> <li><a href="#">Alamat</a></li> <li><a href="#">Kegiatan</a></li> </ul> </li> <li><ahref="http://www.helperblogger.com/">Lain-lain</a></li> </ul> </div>