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

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

Code (markup):

 

Up

 

please help me.

 

hello there,
Please Before testing this Code Make a Backup Of Your Blogger Template From :

Dashboard ==> Template ==> Backup / Restore (On the Right Corner)

From your Google Dashboad open Template ==> edit HTML :

Find This Code :

.mbt-red-grey-menu{margin: 0 auto;
padding:0;
clear:both;
}
.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left; font-weight: 800;
font:14px 'PT Sans Narrow', sans-serif;
width: 100%; text-transform: uppercase;
overflow: hidden;
margin-bottom: 0px;
background:#4486D0;border: 1px solid #BAD6F2;
}
.mbt-red-grey-menu li{
display: inline;
}
.mbt-red-grey-menu li a{
float: left;
color: #fff; font-weight: 800;
padding: 9px 20px;
text-decoration: none;
border-right: 1px solid #3D72C0;
}
.mbt-red-grey-menu li a:visited{
color: #fff;
}
.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background:#264778;

Code (markup):

Replace It With :

.mbt-red-grey-menu{margin: 0 auto;
padding:0;
clear:both;
}
#mbt-red-grey-menu ul,
#mbt-red-grey-menu li,
#mbt-red-grey-menu span,
#mbt-red-grey-menu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#mbt-red-grey-menu {
  height: 49px;
margin:0px;
padding: 0;
float: left; font-weight: 800;
font:14px 'PT Sans Narrow', sans-serif;
width: 100%; text-transform: uppercase;
margin-bottom: 0px;
background:#4486D0;border: 1px solid #BAD6F2;
 
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: -moz-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #3D72C0));
  background: -webkit-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -o-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: linear-gradient(to bottom, #32323a 0%, #3D72C0 100%);
  border-bottom: 2px solid #e00f16;
}
#mbt-red-grey-menu:after,
#mbt-red-grey-menu ul:after {
  content: '';
  display: block;
  clear: both;
}
#mbt-red-grey-menu a {
  background: #3D72C0;
  background: -moz-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #3D72C0));
  background: -webkit-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -o-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #3D72C0 100%);
  background: linear-gradient(to bottom, #32323a 0%, #3D72C0 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#mbt-red-grey-menu ul {
  list-style: none;
}
#mbt-red-grey-menu > ul {
  float: left;
}
#mbt-red-grey-menu > ul > li {
  float: left;
}
#mbt-red-grey-menu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  margin-left: -10px;
}
#mbt-red-grey-menu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#mbt-red-grey-menu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#mbt-red-grey-menu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#mbt-red-grey-menu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#mbt-red-grey-menu .has-sub {
  z-index: 1;
}
#mbt-red-grey-menu .has-sub:hover > ul {
  display: block;
}
#mbt-red-grey-menu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#mbt-red-grey-menu .has-sub ul li {
  *margin-bottom: -1px;
}
#mbt-red-grey-menu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#mbt-red-grey-menu .has-sub ul li:hover a {
  background: #b00c11;
}
#mbt-red-grey-menu .has-sub .has-sub:hover > ul {
  display: block;
}
#mbt-red-grey-menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#mbt-red-grey-menu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#mbt-red-grey-menu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}

Code (markup):

Now we will Place the Menu :

Find :

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

Code (markup):

and replace It With :

<div id='mbt-red-grey-menu'>
<ul>
  <li><a href='http://bbloggertutorials.blogspot.com/'><span>Home</span></a></li>
  <li class='has-sub '><a href='#'><span>Blogger Tools</span></a>
      <ul>
        <li class='has-sub '><a href='#'><span>Tools 1</span></a>
            </ul>
        </li>
        <li class='has-sub '><a href='#'><span>Category With Sub</span></a>
            <ul>
              <li><a href='#'><span>Category 1</span></a></li>
              <li><a href='#'><span>Category 2</span></a></li>
            </ul>
        </li>
      </ul>
  </li>
  <ul><li><a href='http://bbloggertutorials.blogspot.com/p/sitemap.html'><span>Sitemap</span></a></li></ul>
<ul><li><a href='http://bbloggertutorials.blogspot.com/p/privacy-policy.html'><span>Privacy Policy</span></a></li></ul>
  <ul><li><a href='http://bbloggertutorials.blogspot.com/p/contact-me.html'><span>Contact</span></a></li></ul>
</ul>
</div>

Code (markup):

Note :

<li class='has-sub '><a href='#'><span>Blogger Tools</span></a> This Title don't have a link so you have to Get Your Category Link Then Add To :

<li class='has-sub '><a href='#'><span>Tools 1 Link</span></a>

I hope this help and Good Luck !

 

what this?

 

This video many help you to create drop down menu in blogger.

 

I will try.

 

The problem still.

 

hey wo wo , everybody try to give your solution if you don't understood that please follow the famous site www.mybloggertricks.com/ . it is top blog site for developing and tips for blogger , may be you get help from

 

ok my friend but Where do I put my problem?

 

did you copy past the code as is it.. because the one i gave you it's WORKING 100%... It's all what i can do for you!! Goodluck

 

but u seen a problem.

 

so just remove the <LI> Marked and that's all!! then test again, because i already tested the code locally and it's work perfectly....

 

ok I will try...