DROP DOWN MENU BLOGGER

• Sign in " Dashboard " blogger Anda
• Click " Design "

• Pilih HTML/JavaScript widget di tata letak bolgg

• Copy Paste code ini;

  <div id='mbtnavbar'><ul id='mbtnav'>

             <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>

                     <li><a href='#'>Sub Page #3</a></li>

                   </ul>

             </li>

           </ul>

         </div>

•  Important Tip:  Replace # with your Page Links and the bolded text with relevant page names.

•   Kemudian pergi ke "Edit Template"
• Cari kode  "   ]]></b:skin>   "      (   CTRL  +  F  untuk mencari  )
• Copy Paste code ini sebelum code di atas:

/*----- MBT Drop Down Menu ----*/


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


 #mbtnav {
     margin: 0;
     padding: 0;
 }
 #mbtnav ul {
     float: left;
     list-style: none;
     margin: 0;
     padding: 0;
 }
 #mbtnav li {
     list-style: none;
     margin: 0;
     padding: 0;
         border-left:1px solid #333;
         border-right:1px solid #333;
         height:35px;
 }
 #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
     color: #FFF;
     display: block;
    font:normal 12px Helvetica, sans-serif;    margin: 0;
     padding: 9px 12px 10px 12px;
         text-decoration: none;
        
 }
 #mbtnav li a:hover, #mbtnav li a:active {
     background: #BF0100;
     color: #FFF;
     display: block;
     text-decoration: none;
         margin: 0;
     padding: 9px 12px 10px 12px;
        
    
        
 }
 #mbtnav li {
     float: left;
     padding: 0;
 }
 #mbtnav li ul {
     z-index: 9999;
     position: absolute;
     left: -999em;
     height: auto;
     width: 160px;
     margin: 0;
     padding: 0;
 }
 #mbtnav li ul a {
     width: 140px;
 }
 #mbtnav li ul ul {
     margin: -25px 0 0 161px;
 }
 #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
     left: -999em;
 }
 #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
     left: auto;
 }
 #mbtnav li:hover, #mbtnav li.sfhover {
     position: static;
 }
 #mbtnav li li a, #mbtnav li li a:link, #mbtnav 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;
    
 }
 #mbtnav li li a:hover, #mbtnavli li a:active {
     background: #060505;
     color: #FFF;
     display: block;     margin: 0;
     padding: 9px 12px 10px 12px;
         text-decoration: none;
 }

• Change #060505 to change background color of the Main menu 
• Change #FFF to change font color, size and family 
• Change #BF0100 to change the background of a tab on mouse hover 
• Change #BF0100 to change the background color of the drop down menu 
• Change #060505 to change the background color of drop down menu on mouse hover

OK ----Now Click on " Save Template "

Open Your Blog and See The Result