How to Add Drop-Down Menu in Blogger

hi,
my blog: www.bbloggertutorials.blogspot.com
I want to add drop-down menu in my blog but i can't.

I want to add it in blogger tools
this is html code my blog

Code (text):

<ul class='mbt-red-grey-menu'>
<li><a href='http://bbloggertutorials.blogspot.com/'>Home</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/'>Blogger Tools</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'>Sitemap</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'>Contact Me</a></li>
</ul>

 

does blogger allow running jquery ?

 

i already gave you an answer of this question !!

@cadsii : yes blogspot allo jquery..

 

Ok here it goes

HTML

========================


<ul class="mbt-red-grey-menu"> <span>Blogger Tools</span>
<li><a href='http://bbloggertutorials.blogspot.com/'>Home</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/'>Blogger Tools</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'>Sitemap</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'>Contact Me</a></li>
</ul>


CSS

=========================


.mbt-red-grey-menu {
color:#8d8d8d;
background:#eeeeee;
padding:4px;
display:inline-block;
position:relative;
width:200px;
height:22px;
line-height:22px;
vertical-align:middle;
}
.mbt-red-grey-menu span {
cursorointer;
}
.mbt-red-grey-menu li {
display:none;
}
.mbt-red-grey-menu .mbt-red-grey-menu li {
position:absolute;
left:-1px;
top:30px;
background:#e1e1e1;
padding:4px;
min-width:100%;
}



jQuery

========================


jQuery.noConflict();

jQuery(document).ready(function ($) {
$('.mbt-red-grey-menu span').on('click', function () {
$(this).parents('.mbt-red-grey-menu').children('li').stop(true, true).slideToggle('medium', function () {

if ($('li').is(':visible')) {
// This alters the content of the "hook" when we open the drop down
$('.mbt-red-grey-menu span').html('Close Dropdown');
} else {
// This alters the content of the "hook" when we close the dropdown
$('.mbt-red-grey-menu span').html('Open Dropdown');
}

});
});

$('html').on('click', function () {
$('.mbt-red-grey-menu li:visible').slideToggle('fast');
});

$('.mbt-red-grey-menu > *').on('click', function (event) {
event.stopPropagation();
});
});

 

Or http://jsfiddle.net/cadsii/ZhXXF/1/