Tutorial To Made Drop-Down Menu Widget

This Tutorial Will Help You To Create Your Own Style Drop-Down Menu In Blogger.
Its Too Easy And Also You Can Customize it Anyway You Want.
It Will Look Like Mine.


It Works As An Widget so You Can Place It Any Where You Want
So Lets Began.................
.
Tools Needed:
Notepad++(Optional)
.
Step 1: Login to Blogger Dashboard and navigate to Layout > Edit Html And Click On Download Full Template



.
Step 2: Open The Downloaded Template With Notepad++.
.
Step 3: Now Find

Code:

</head>

and Replace It With

Code:

<!--jquery-DD-Menu-Starts--><style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#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: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).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>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->

.
Step 4: Now Let's Look On The Customizing.

Replace Those Codes With Your Desired Code.
You May Click Here To Find All HTML Color Code

Step 5: and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type

Code:

<!--BODY-CODE--><ul id="jsddm"><li><a href="http://trick-center.blogspot.com">Home</a></li><li><a href="http://trick-center.blogspot.com/search/label/PC">PC Stuff</a><ul><li><a href="http://trick-center.blogspot.com/search/label/PC%20Software">PC Software</a></li><li><a href="http://trick-center.blogspot.com/search/label/PC%20Tips">PC Tips</a></li></ul></li><li><a href="http://trick-center.blogspot.com/search/label/mobile">Mobile World</a><ul><li><a href="http://trick-center.blogspot.com/search/label/Java">Java</a></li><li><a href="http://trick-center.blogspot.com/search/label/Symbian">Symbian</a></li><li><a href="http://trick-center.blogspot.com/search/label/Android">Android</a></li></ul></li><li><a href="http://trick-center.blogspot.com/search/label/Tech">Tech News</a></li><li><a href="http://trick-center.blogspot.com/search/label/Blogger%20Tips">Blogger Tips</a></li><li><a href="http://www.pl*nder.com/reyad010">Free Download</a></li></ul>

.
Replace URLs And Texts Above In Your Desired Means.
.
Step 6: Now Save The Widget And "Drag And Drop" It Any-Where You Want to Show It. Save The Template and You Are Done.
An Working Demo Can Be Found Here

************************Source: Collected, Simplified By Me*******************************