A stylish and beautiful drop down menu for Blogger site

Drop down menu is a cluster of menus that gives a website owner the facilities of  including to many items in a single menu. Google blogger's default template has not any option to add drop down menu. If you want to add drop down menu in your blogger website, you have to do it manually adding some codes to the HTML editor box. Adding Drop Down Menu gives much flexibilities to both Admin and to Visitors. Again it is SEO friendly. It increase blog's beauty too. Today I will teach you how you'll add a stylish drop down menu to your website. Dear I won't show you here any demo. Rather we will make an experiment over drop down menu here. The code that I have given here, I have added comments beside the lines. You can change the value here and see the preview. That's the way to make an
experiment over it. So let's start making an experiment. Before making any experiment over blogger default template, you need to keep backup of your whole template. It's easy. Now just go to Template option and then click on Backup/Restore . Now click on Download full template  to keep back up of your whole template. After downloading close the the window. Now click on Edit HTML to edit or add codes in the Coding box. Now click inside the HTML editor box and press Ctrl+F key to find coding. Now write ]]></b:skin> in it and hit Enter key. Now copy the following code from the code highlighter...

/* -----starting of the drop down menu-------- */
/* This drop down menu is developed and shared by http://www.infotechlife.com */
#jsddm {
height: 40px;
margin: 0;
overflow: visible;
z-index: 2;
padding: 15px;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA; /* this code changes the border color of Main menu */
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#1857FD), to(#cccccc));
/* this two lines(up or above) change the color of main menu. */ 
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #759F93; /* This color code changes hover color of Main menue list */
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA; /* This changes the drop down menu color */
}
#jsddm li ul li a:hover {
background: #A3CEE5; /* This changes the drop down menu hover colour that means mouse pointer color. */
}
/* --------------this is the end of the drop down menu-------------- */

Having copied paste the above code just before the ]]></b:skin> code. Now no. 1 step is complete. Then press Ctrl+F  key again. Write </head> in the search box and hit Enter key. Now copy the following code and paste this jquery code just before </head> tag

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script> 

Now dear friends your are half way done. Now go back to Lay out option. Click on Add Gadget Scroll your mouse to find HTML/JAVASCRIPT. Now click on it. Copy the following code and past this HTML part in to the box.

  <ul id="jsddm">
  <li><a href="http://www.infotechlife.com">Home</a>
  <li><a href="#">Link 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>q az
  </li>
 <li><a href="#">Link 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  </li></ul>

Now you have successfully added the dropdown menu in your own website. Now give some times to it to match it for your site. If you find any difficulties,then make comments below. I will give solutions.