How To Add Drop Down Menu To Blogger Quickly

=>Template
=> HTML
=> Copy the following code and paste it just before :

#cssmenu {

  border: none;

  border: 0px;

  margin: 0px;

  padding: 0px;

  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;

  font-size: 14px;

  font-weight: bold;

  width: auto;

}

#cssmenu ul {

  background: #333333;

  height: 35px;

  list-style: none;

  margin: 0;

  padding: 0;

}

#cssmenu li {

  float: left;

  padding: 0px;

}

#cssmenu li a {

  background: #333333 url('seperator.png') bottom right no-repeat;

  display: block;

  font-weight: normal;

  line-height: 35px;

  margin: 0px;

  padding: 0px 25px;

  text-align: center;

  text-decoration: none;

}

#cssmenu > ul > li > a {

  color: #cccccc;

}

#cssmenu ul ul a {

  color: #cccccc;

}

#cssmenu li > a:hover,

#cssmenu ul li:hover > a {

  background: #777777 url('hover.png') bottom center no-repeat;

  color: #FFFFFF;

  text-decoration: none;

}

#cssmenu li ul {

  background: #333333;

  display: none;

  height: auto;

  padding: 0px;

  margin: 0px;

  border: 0px;

  position: absolute;

  width: 225px;

  z-index: 200;

  /*top:1em;

/*left:0;*/

}

#cssmenu li:hover ul {

  display: block;

}

#cssmenu li li {

  background: url('sub_sep.png') bottom left no-repeat;

  display: block;

  float: none;

  margin: 0px;

  padding: 0px;

  width: 225px;

}

#cssmenu li:hover li a {

  background: none;

}

#cssmenu li ul a {

  display: block;

  height: 35px;

  font-size: 12px;

  font-style: normal;

  margin: 0px;

  padding: 0px 10px 0px 15px;

  text-align: left;

}

#cssmenu li ul a:hover,

#cssmenu li ul li:hover > a {

  background: #777777 url('hover_sub.png') center left no-repeat;

  border: 0px;

  color: #FFFFFF;

  text-decoration: none;

}

#cssmenu p {

  clear: left;

}

OR

Use the following:

/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #130000; /* Menu hover */
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

=> Layout--->add a gadget--->HTML/ Java script.

=> Copy the following code and paste.

<div id='cssmenu'>
<ul>
   <li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/'><span>home</span></a></li>
   <li class='has-sub'><a href='#'><span>Earn Money Online</span></a>
      <ul>
         <li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/Earn%20Money%20Online'><span>Adsense</span></a></li>
         <li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/SEO'><span>SEO</span></a></li>
         <li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com/search/label/Blogger'><span>Blogger'</span></a></li>
         <li class='last'><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>Tips & Tricks</span></a></li>
      </ul>
   </li>
   <li><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>Training</span></a></li>
   <li class='last'><a href='http://onlinemoneyincomeshorttrainingprogram.blogspot.com'><span>About</span></a></li>
</ul>
</div>

=> Change the links as required.

=> Go to your layout  and  drag your very top gadget underneath your your header.  Click edit on your old menu and remove it. Click "save arrangement"