Cara Buat Drop Down Menu Dengan Teknik CSS

Postingan kali ini akan membahas tentang cara membuat menu drop down dengan teknik css, sesuai dengan permintaan sahabat bloger di cara membuat tag cloud berputar. Dimana salah satu sahabat bloger meminta cara menu drop down seperti menu punya blog bungas ini. Drop Down menu yaitu suatu menu dimana menunya memliki sub-sub menu, itu penjelasan sederhananya.

Untuk membuat atau memasang menu drop down ini, agan ikuti langkah-langkah berikut :

1. Login Di Akun Bloger
2. Selanjutnya pada dashboard pilih tata letak dan tambah gadget
3. Pilih html javascript
4. Copykan kode berikut ke dalam html javascript

<div id='bungasdropdownmenu'>
      <ul id='dropdownmenu'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
             </ul>
        </li> </ul>
    </div>

Lihat pada Sitemap  di bawahnya ada sub page, itulah yang dimaksud menu drop down. Jika sub menu anda lebih dari dua anda cukup menambahkan kode <li>...</li>

     5. Seret gadget di atas post dan Simpan pengaturan tata letak,
         kemudian ke template dan edit html
     6. Cari kode ]]></b:skin>
     7. Copykan kode di bawah ini tepat di atas kode ]]></b:skin> 

/*----- Bungas Drop Down Menu ----*/

#bungasdropdownmenu {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#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:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 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: 160px;
    margin: 0;
    padding: 0;
}
#dropdownmenu li ul a {
    width: 140px;
}
#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: 120px;

    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    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;
}

Silahkan anda ubah kode warna yang hurufnya ditebakan sesuai dengan kinginan anda, gunakan tool kode warna untuk memudahkan anda.

8. Pratinjau template anda, jika berhasil langsung di simpan saja.

4.5