How to make Drop down menu in blogger?

Hey friends! I am quite honored to let you know that how to make your drop down menu in blogger. There are much excellent features in blogger but unfortunately here I noticed that something special is missing from blogger and that is Drop down menu feature. I know how important it is for those who really love with working on web. There are different methods for drop down menu creation but the one which I am sharing with you will be your choice. Now you are few steps away from creating your own drop down menu in blogger. Follow up the following steps:

1.   Log in to your blogger account.
2.   Go to template/Theme and select “Edit Html” option.
3.   Randomly left click on any place in programming section.
4.   Search for “]]></b:skin>” in search bar using “Ctrl F” command.
5.   Once you find it, now past the following code just above it.

/*DDM Begins*/ #menubar { background:#5C3524; /*background color...*/ width: 913px; /*menu length*/ color: #FFF; /*White color on hovering over*/ margin: 1px; padding: 0; position: relative; margin-top: -20px; border-top:1px solid #5C3524; /*menu top line color*/ 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 #5C3524; /*line separating menu items*/ border-right: 1px solid #5C3524; /*line separating menu items*/ height:35px; } #menus li a, #menus li a:link, #menus li a:visited { color: #FFCD7F; *text color before selection*/ display: block; font:normal 14px Bell MT, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 11px 13px 11px 13px; /*menu item popup position on hovering*/ text-decoration-style: None; } #menus li a:hover, #menus li a:active { background: #130000; /* black color after selection, Drop down hover */ color: #FFF; /* Drop down white color on selection */ display: block; text-decoration-style: None; margin: 0; padding: 10px 12px 10px 12px; } #menus li { float: left; padding: 0; } #menus li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 120px; margin: 0; padding: 0; } #menus li ul a { width: 110px; /*submenu item box width*/ } #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: #5C3524; /* drop down background color reddish instead of selyti */ width: 100px; color: #ffcd7f; /* Drop down menu text color before selection */ display: block; font:normal 14px Bell MT, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0; padding: 10px 13px 11px 13px; text-decoration-style: None; z-index:9999; border-bottom:1px solid #5C3524; /* Drop down menu bottom line yellowish color */ } #menus li li a:hover, #menusli li a:active { background: #130000; /* black color after selection, Drop down hover */ color: #FFF; /* Drop down white color on selection */ display: block; margin: 0; padding: 10px 12px 10px 12px; text-decoration-style: None; z-index: 9999; } /* DDM Ends */
6.   Click “Save changes” option.
      If you did it till step 6, then you have covered most of it.
7.   Now, go to Layout option and click on “Add Gadget” option.

8.   There select Add Html and JavaScript gadget.
9.   Edit Html and JavaScript Gadget.
10. Paste the following code in its "content" section.
div id='menubar'> <div id='menubar'> <ul id='menus'> <li> <a href='Enter url'> Home </a> </li> <li> <a href='Enter url'>Menu Item1</a> <ul> <li> <a href='Enter url'>submenu item1</a> </li> <li> <a href='Enter url'>submenu item2</a> </li> <li> <a href='Enter url'>submenu item3</a> </li> </ul> <li> <a href='Enter url'>Item2</a> <ul> <li> <a href='Enter url'>submenu item1</a> </li> <li> <a href='Enter url'>submenu item2</a> </li> <li> <a href='Enter url'>submenu item3</a> </li> </ul> </li> <li> <a href='enter url'>About</a> </li> </li> </ul> </div>

11. Click save option.

12. Drag your new Gadget to cross column section and press save arrangement.
      
That’s all!!!
For further queries comment in the box below. Thank you