Tutorial mudah membuat dropdown menu cantik dengan css

Tutorial mudah membuat dropdown menu cantik dengan css bisa anda dapatkan disini ....

Anda ingin membuat dropdown menu pada blog anda ? Tidak perlu pusing, karena saya akan memberika langkah mudah membuatnya disini,.
Langsung saja, cekidot....

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>

5. Pindahkan widget tersebut ke bagian atas blog kita, biasanya terletak di bagian bawah header..Dan klik save...
6. Sekarang kita berpindah ke bagian edit html untuk memberikan kode css.
7. Centang pada "Expand Widget Templates" .
8. Cari kode ]]></b:skin> jika kode tersebut tidak ada, cari kode </style>
9. Letakkan kode ini dibawah kode ]]></b:skin> atau </style>

   /*----- 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;
   }   

    10. Klik save dan selesai...
   
   Sekarang mari kita edit kode tersebut....Silahkan baca keterangan kode dibawah ini ...
   
   

   1. Pada kode pertama ataupun kode yang kita letakkan di widget javascript, gantilah tanda pagar dengan alamat url menu yang kita inginkan, dan kode berwarna biru(home/contact/dll.) dengan menu yang kita inginkan..
      
      (masih dalam kode pertama )Pada kode berwarna merah(submenu), Itulah yang disebut dengan dropdown, dan, tanda pagar merupakan url dari menu yang ada pada dropdown yang kemudian disingkat menjadi dropdown menu
   2. Dan kode kedua, yaitu kode css, kita bisa ganti kode warna tersebut dengan kode warna yang lain, sesuka hati kita

   Silahkan save dan selesai....
   Sekian tutorial dari saya,..
   Thanks dan salam..
   
   source:bungas