So today we will learn how to add a drop down menu for blogger and a very easy way,
This menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,
but please remember,

Go to your blogger account,
Navigate to Dashboard >> Design >> Edit Html >
And find the following code,

]]></b:skin>

And before it, add the following css code,



#jsddm {<br /> margin: 0;<br /> padding: 15px;<br /> z-index:1000000000;<br /> position:relative;<br /> }<br /> <br /> #jsddm li {<br /> float: left;<br /> list-style: none;<br /> font: 12px Tahoma, Arial;<br /> }<br /> <br /> #jsddm li a {<br /> display: block;<br /> white-space: nowrap;<br /> margin:1px 3px;<br /> border: 1px solid #AAAAAA;<br /> background: #cccccc;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));<br /> background: -moz-linear-gradient(top, #ebebeb, #cccccc);<br /> padding: 5px 10px;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> text-shadow: #ffffff 0 1px 0;<br /> color: #363636;<br /> font-size: 15px;<br /> font-family: Helvetica, Arial, Sans-Serif;<br /> text-decoration: none;<br /> vertical-align: middle;<br /> }<br /> <br /> #jsddm li a:hover {<br /> background: #C8C8C8;<br /> }<br /> <br /> #jsddm li ul {<br /> margin: 0;<br /> padding: 0;<br /> position: absolute;<br /> visibility: hidden;<br /> border-top: 1px solid white;<br /> }<br /> <br /> #jsddm li ul li {<br /> float: none;<br /> display: inline;<br /> }<br /> <br /> #jsddm li ul li a {<br /> width: auto;<br /> background: #CAE8FA;<br /> }<br /> <br /> #jsddm li ul li a:hover {<br /> background: #A3CEE5;<br /> }<br />

Now the next step is find this code

</head>

 Then add this code exactly before it, 

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

Now Click Save Template 


now last step is 

Add The Menu To Your Blog

 Now Go to your Dashboard >> Design >>
And on your page elements page, click on Add A Gadget any where on the screen,
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,
<ul id="jsddm"> <li><a href="#">Home</a><br /> <li><a href="#">Menu 1</a><br /> <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> </li><br /> <br /> <li><a href="#">Menu 2</a><br /> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li><br /> <br /> <li><a href="#">Menu 3</a><br /> <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><br /> <br /> <li><a href="#">Menu 4</a></li><br /> <li><a href="#">Menu 5</a></li><br /> <li><a href="#">AllBlogTools</a></li><br /> </li></ul>

And click Save
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click Save again,
Now go to view your blog and enjoy your new blogger drop-down menu.
Note : In step 3, you must change the menu titles and replace all # letters by the right menu url.
Enjoy!
Stay Update
InfO PlaNet