If you are using blogger for your blogs, you know that blogger do not provide drop down menus in templates. If you need to put up a drop down menu in your blog, then you just need to put up this codes. I am going to provide the steps involved in putting up a drop down menu in your blogger blog.

You need put up two codes. I will explain it in a clear way what codes and where to put in those.

Code 1:



<div id='menubar'>
    <ul id='menus'>
         <li><a href='LINK'>TabName1</a></li>
         <li><a href='LINK'>TabName2</a></li>
         <li><a href='LINK'>TabName3</a></li>  
         <li><a href='LINK'>TabName4</a>
             <ul>
                <li><a href='LINK'>DropDownName1</a></li>
                <li><a href='LINK'>DropDownName2</a></li>
                <li><a href='LINK'>DropDownName3</a></li>
             </ul>
         </li>
    </ul>
  </div>




Code 2:




/*------- Drop Down Menu Starts Here -------*/

#menubar {
    background-color: transparent;
    width: 840px;
    color: #000000;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #b7c1e3;
        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:0px;
        border-right:0px;
        height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #000000; /* This changes the text color of visited links. */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5; 
           /* change margin value to 0 if you do not want space between tabs */
           /* change 14 to other number to increase or reduce font size */
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #b7c1e3; /* This is the main menu background color when a user hovers. */
    color: #000000; /* This will change the text color. */
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;      
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 200px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 200px;
}

#menus li ul ul {
    margin: -25px 0 0 200px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: auto;
}

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

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #b7c1e3; /* This is the background color for the drop down menu. */
    width: 180px;
    color: #000000; /* This changes the text color. */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
               /* change 14 to another number to increase or reduce the font size */
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #b7c1e3;
}

#menus li li a:hover, #menusli li a:active {
    background: #6c7db0; /* This is the background color for the drop down menu when a user hovers. */
    color: #000000; /* This changes the text color. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*------- Drop Down Menu Ends Here ------*/




Now I will explain step by step where to put this codes.


STEP 1.


     

  • Click on 'Layout'. You will find 'Add to Gadget' button. A new window will pop up and you will find options of which gadget to add.
  • Select  'HTML/Javascript'. Paste the 'Code 1' in the contents space and save it.
  • Arrange the gadget just below the header.


STEP 2.


  • Click on 'Template' button. 
  • Back up your template before you start putting up the code. Its good to be in a safe side by backing up. You can back up by clicking 'Backup/restore' button.


STEP 3.

  • Click on the 'Edit Html' Button





  • Look for this code - '<b:skin>...</b:skin> . Expand it. Go till the portion where the blue colored part finishes.




  • You will find this code: ]]></b:skin>
  • Place the Code 2 just before this line.






  • Click on the 'Save Template' button and you are done with the drop down menu.


CHANGES TO BE MADE ACCORDINGLY:




  • 'LINK'- Replace link with the link of your page or post.
  • 'TabName'- Replace Tabname with the relevant tab names you want to place.
  • 'DropDownName'- Replace DropDownName with the names to be dropped down under the  tab.
  • Insert ' <li><a href='LINK'>TabName</a></li>' to increase the number of tabs
  • Insert ' <li><a href='LINK'>DropDownName3</a></li>' to increase the number of drop down items.
  •  #ffffff are color codes, you can the codes to change the colors of background, text etc.
This way you will get a drop down menu in your blog. If there are any problem in putting up the codes or the codes are not working please comment so that I can rectify the mistakes.