Membuat Dropdown menu untuk blogger

Detiktutorial kali akan membahas bagaimana membuat dropdown menu untuk blogger, tanpa mengubah HTML dari template kamu...
cukup tambahkan Widget HTML dan Javascript aja ...
okey kalau sudah menambahkan Widget HTML dan Javascript...
copykan code dibawah ini

#bungasdropdownmenu {
 text-align:left;
    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-right:1px solid rgb(238,238,238);
        height:35px;
}
#dropdownmenu li a, #dropdownmenu li a:link, #dropdownmenu li a:visited {
    color: #000000;
    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:rgb(64,150,238);
    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:rgb(64,150,238);
    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: rgb(136,191,232);
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}   
</style>
<div id='bungasdropdownmenu'>
<ul id='dropdownmenu'>
 <li>
     <a href='http://detiktutorial.blogspot.com'>
        <img src="http://www.ilmuwebsite.com/wp-content/themes/ilmubluev4/images/home.png" align="middle" /></a>
  </li>
    <li><a href='#'>Programming</a>
  <ul>
   <li><a href='#'>Visual Basic</a></li>
   <li><a href='#'>Delphi</a></li>     
  </ul>    
    </li>
    <li><a href='#'>Internet</a>
  <ul>
   <li><a href='#'>BLogging</a></li>
   <li><a href='#'>Wordpress</a></li>
   <li><a href='#'>Googling</a></li>     
   <li><a href='#'>SEO</a></li>   
  </ul>    
    </li>
    <li><a href='#'>Web Tutorial</a>
  <ul>
   <li><a href='#'>Tutorial CSS</a></li>
   <li><a href='#'>Tutorial HTML</a></li>
   <li><a href='#'>Tutorial MYSQL</a></li>     
   <li><a href='#'>Tutorial PHP</a></li>   
   <li><a href='#'>Tutorial JQUERY</a></li>   
   <li><a href='#'>Tutorial Javascript</a></li>   
   <li><a href='#'>Tutorial AJAX</a></li>   
  </ul>    
    </li>
    <li><a href='#'>Grafis & Multimedia</a>
  <ul>
   <li><a href='#'>Corel Draw</a></li>
    <li><a href='#'>Adobe Photoshop</a></li>       
   <li><a href='#'>Adobe Flash</a></li>
   <li><a href='#'>Adobe Ilustrator</a></li>
   <li><a href='#'>Adobe Premiere</a></li>      
   <li><a href='#'>Adobe After Effdct</a></li>                    
  </ul>    
    </li>
    <li><a href='#'>Ebook</a>
  <ul>
   <li><a href='#'>Programming</a></li>
    <li><a href='#'>Desain Grafis</a></li>       
   <li><a href='#'>Multimedia</a></li>
   <li><a href='#'>Hacking & Cracking</a></li>
   <li><a href='#'>Blogging</a></li>      
<li><a href='#'>Web Tutorial</a></li>                    
  </ul>    
    </li>    
<li><a href='http://detiktutorial.blogspot.com/2012/06/tentang-kami.html'>Tentang Kami</a></li>    
<li><a href='http://detiktutorial.blogspot.com/2012/04/site-map.html'>Sitemap</a></li>
</ul>
</div>

nah kalau sudah selsai tinggal save dan buka halaman blogger anda
deng deng hasilnya seperti apa...