cara membuat Menu Drop Down Menggunakan CSS

Pada kesempatan kali ini saya akan membuat tutorial mengenai Cara Membuat Menu Drop Down Menggunakan CSS paling mudah dipahami dan diterapkan. Sebenarnya Java Script untuk membuat Cara Membuat Menu Drop Down Menggunakan CSS ini bukan bikinan saya, tapi ada sebagian hasil dari editan saya.

1. Masuk ke blog agan
2. kemudian pilih "Template" 
3. Setelah anda klik "Template" kemudian klik lagi pada "edit HTML" 
4. Setelah itu Centang "Expand Template Widget" 
5. Cari kode seperti ini ]]></b:skin>
6. Setelah ketemu, silahkan letakan kode dibawah ini tepat di atas kode ]]></b:skin>
   
   /*Bungas Drop Down Menu */
   #bungasdropdownmenu {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmyIo-Y1I59zw-HfRAXNSbcZNJNblqhvbHYQbtlleP4Lf2PGIDI4CWWHpyy2PaboA2wrD__3LTVwy4AggIRCiuqM6AiGFxZ9Aicf6ZHck-mfVSCSxDugIuyvYZtS6NM2KetcbtOFfzC40/s1600/dark-zigzag.png) repeat-x left top;
   width:1020px;
   height:42px;
   -moz-border-radius-topleft:2px;
   -moz-border-radius-topright:2px;
   -moz-border-radius-bottomright:2px;
   -moz-border-radius-bottomright:2px;
   -webkit-border-radius:2px;
   border-radius:2px;
   margin:0 auto
   }
   #dropdownmenu {
   margin: 0;
   padding: 0;
   }
   #dropdownmenu ul {
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   }
   #dropdownmenu li {
   list-style: none;
   margin: 0;
   padding: 0;
   border-left:1px solid #333;
   border-right:1px solid #333;
   height:35px;
   }
   #dropdownmenu li a, #dropdownmenu li a:link, #dropdownmenu li a:visited {
   color: #FFF;
   display: block;
   font:16px "Ropa Sans",arial; margin: 0;
   padding: 12px 12px 10px 12px;
   text-decoration: none;
   
   
   }
   #dropdownmenu li a:hover, #mbtnav li a:active {
   background: #BF0100;
   color: #FFF;
   display: block;
   text-decoration: none;
   margin: 0;
   padding: 9px 12px 10px 12px;
   
   
   }
   #dropdownmenu li {
   float: left;
   padding: 0;
   }
   #dropdownmenu li ul {
   z-index: 9999;
   position: absolute;
   left: -999em;
   height: auto;
   width: 200px;
   margin: 0;
   padding: 0;
   }
   #dropdownmenu li ul a {
   width: 200px;
   }
   #dropdownmenu li ul ul {
   margin: -25px 0 0 161px;
   }
   #dropdownmenu li:hover ul ul, #dropdownmenu li:hover ul ul ul, #dropdownmenu li.sfhover ul ul, #dropdownmenu li.sfhover ul ul ul {
   left: -999em;
   }
   #dropdownmenu li:hover ul, #dropdownmenu li li:hover ul, #dropdownmenu li li li:hover ul, #dropdownmenu li.sfhover ul, #dropdownmenu li li.sfhover ul, #dropdownmenu li li li.sfhover ul {
   left: auto;
   }
   #dropdownmenu li:hover, #dropdownmenu li.sfhover {
   position: static;
   }
   #dropdownmenu li li a, #dropdownmenu li li a:link, #dropdownmenu li li a:visited {
   background: #BF0100;
   width: 200px;
   color: #FFF;
   display: block;
   font:16px "Ropa Sans",arial;
   margin: 0;
   padding: 9px 12px 10px 12px;
   text-decoration: none;
   z-index:9999;
   border-bottom:1px dotted #333;
   
   
   }
   #dropdownmenu li li a:hover, #dropdownmenu li li a:active {
   background: #060505;
   color: #FFF;
   display: block; margin: 0;
   padding: 9px 12px 10px 12px;
   text-decoration: none;
   }
7. Jika proses nomer 6 sudah selesai, kemudian cari kode seperti ini <div id='outer-wrapper'>
8. Letakan kode dibawah ini tepat di atas kode <div id='outer-wrapper'>
   
   <div id='bungasdropdownmenu'>
   <ul id='dropdownmenu'>
   <li>
   <a href='LINK'>Judul</a>
   <ul>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   </ul>
   </li>
   <li>
   <a href='LINK'>Judul</a>
   <ul>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   </ul>
   </li>
   <li>
   <a href='LINK'>Judul</a>
   </li>
   <li>
   <a href='LINK'>Judul</a>
   <ul>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   <li><a href='LINK'>Judul</a></li>
   </ul>
   </li> </ul>
   </div>
9. Jika anda ingin meletakan Menu Drop Down di atas Header maka letakan kode di atas tepat di atas kode <div id='header-wrapper'>
10. Ganti semua kode yang berwarna merah sesuai dengan keinginan anda dan juga ubah kode yang berwarna biru sesuai dengan lebar template sobat. Jika anda ingin merubah Backgorund Menu maka silahkan ganti kode yang berwarna hijau dengan gambar milik anda.
11. selesai

Posted in: Blogger Trick