Add Drop Down Menu in Blogger

Drop Down menu is an important part for standarlizing your blog .You will find so many methods for doing that on internet but most of them are either difficult to understand or are not working now. But here i am providing you simple Methods for doing that .so just follow the below steps :

Befor trying this 
Don’t forget to backup your current blogger template, ( by downloading it )

1. Add The Menu CSS

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 {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

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

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#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: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2. Adding the Java codes

At the same page, find the next 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>

Now Click Save Template

3. Adding 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>
  <li><a href="#">Menu 1</a>
  <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>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <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>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </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.

After applying this your menu will look like below shown menu.Just change your menu titles with your titles

.

leave your valuable comments for the betterment of this website

• Home
• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5
• Infochek
  
  

Click To Visit Our Books Store

I have read some fantastic books on English language that really helped me improve my writing. You can buy my recommended books on Amazon. Here is the lists below:

Books on Grammar:

Books	Buy Links	Rating
The Elephants Of Style		4.5/5
English Grammar in Use Book		4.5/5
Practical English Usage		4.5/5
The Elements of Style		4.5/5
Essentials of English		4.5/5
Handbook of English Grammar and Usage		4.5/5
Woe Is I		4.5/5
Grammar Girl's Quick and Dirty Tips for Better Writing		4.5/5
It was the best of sentences, it was the worst of sentences.		4.5/5
If you want more books on English language, click the link