CSS Dropdown Menu Sederhana dengan Icon

Drop down menu ini cukup simple tapi memiliki nilai karacteristic tersendiri disegi tampilannya karya shpeedie yang dapat anda gunakan untuk mempercantik blog anda.
Untuk pemasangannya sebegai beriku:

1. login ke account blogger anda
2. Klik Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
 5. Copy kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;

}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  position: relative;
  padding: 5px 5px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #99D5FF;
  color: #000;
}
ul li ul {
  padding: 1;
  position: absolute;
  top: 55px;
  left: 0;
  width: 100px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
}
ul li ul li {
  background: #99D5FF;
  display: block;
  color: #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
} 

6. Klik Simpan Template
Nah, kode CSS di atas sudah tersimpan di dalam template anda, masih ada 1 langkah lagi yang harus anda lakukan agar menu drop down horizontal blog anda siap untuk digunakan.

Cara memasang kode HTML menu drop down pada tata letak blog
Cari Kode

<b:widget id='Header1' locked='true'

Contoh :

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='RezDown7 (Header)' type='Header'/> </b:section>

Copy-Paste Kode HTML yang tersedia dibawah ini tepat di bawah kode </b:section> jika ingin menempatkan Di Bawah Header. Jika ingin menempatkan di atas header paste kode di bawah ini tepat Di Atas kode

<b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>

 Berikut ini kodenya

<ul>
       <li><a href="http://appnotised.com.au/reel"><img src="http://appnotised.com.au/
              wp-content/themes/twentytwelve/images/tvc.png" /></a>
       <ul>
              <li>reel</li>
              <li>archive</li>
       </ul>
              </li>
               <li><a href="http://appnotised.com.au/drama"><img src="http://appnotised.com.au/
                      wp-content/themes/twentytwelve/images/drama.png" /></a>
        <ul>
                <li>cinema</li>
                <li>tv</li>
        </ul>
                </li>
                <li><a href="http://appnotised.com.au/about"><img src="http://appnotised.com.au/
                      wp-content/themes/twentytwelve/images/about.png" /></a>
         <ul>
                 <li>bio</li>
                 <li>cv</li>
         </ul>
                 </li>
                  <li><a href="http://appnotised.com.au/"><img src="http://appnotised.com.au/
                        wp-content/themes/twentytwelve/images/links.png" /></a>
          <ul>
                 <li>vimeo</li>
                 <li>press</li>
          </ul>
                 </li>
                 <li><a href="http://appnotised.com.au/contact"><img src="http://appnotised.com.au/
                       wp-content/themes/twentytwelve/images/contact.png" /></a>
                  </li>
                  <li><a href="http://appnotised.com.au/login"><img src="http://appnotised.com.au/
                        wp-content/themes/twentytwelve/images/login.png" /></a>
                  </li>
            </ul>

Klik Simpan Template dan lihat hasilnya

Catatan :
URL Gambar Icon yang saya tandai warna merah juga dapat anda ganti dengan icon creasi anda sendiri

Design By : shpeedie