How To Add a Drop Down Menu In Blogger?

In our previous post for webmaster and blogger, we discussed with you the Trick to add Twitter Fan Box on Your Blog and Website! Every Blogger wants to make his blog more beautiful. Menu is the main part of any blog. Good and Beautiful Menu put the impact on the mind of user. Every blogger demands a beautiful, attractive and easy to navigate Menu for his blog. In this article we are going to give you the trick to add A Beautiful drop down menu in your Blogger's Blog. I hope our this article helps you make your blog more beautiful. Read the instructions carefully and add this Menu to your blog. Don't forgot to share this article with your friends from the social tab on left hand side.

• Buy a Domain Name With 25% Discount!
• Best Free Search Engine Optimization Tips and Tricks!

Steps To Add Drop Down Menu To Your Blog!

Replace # with your Page Links and the highlighted bold text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>

To add another tab just paste this code above </ul>

<li>
          <a href='#'>Tab Name</a>
        </li> 

    ]]></b:skin>

6. Just above this code paste the code given below:

/*----- HIFIFUN.COM Drop Down Menu ----*/

#hififunnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#hififunnav {
    margin: 0;
    padding: 0;
}
#hififunnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#hififunnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#hififunnav li a, #hififunnav li a:link, #hififunnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

}
#hififunnav li a:hover, #hififunnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;      
}
#hififunnav li {
    float: left;
    padding: 0;
}
#hififunnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#hififunnav li ul a {
    width: 140px;
}
#hififunnav li ul ul {
    margin: -25px 0 0 161px;
}
#hififunnav li:hover ul ul, #hififunnav li:hover ul ul ul, #hififunnav li.sfhover ul ul, #hififunnav li.sfhover ul ul ul {
    left: -999em;
}
#hififunnav li:hover ul, #hififunnav li li:hover ul, #hififunnav li li li:hover ul, #hififunnav li.sfhover ul, #hififunnav li li.sfhover ul, #hififunnav li li li.sfhover ul {
    left: auto;
}
#hififunnav li:hover, #hififunnav li.sfhover {
    position: static;
}
#hififunnav li li a, #hififunnav li li a:link, #hififunnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

}
#hififunnav li li a:hover, #hififunnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*----- HIFIFUN.COM Drop Down Menu ----*/

You Can Make these changes if you want:

• Change #060505 to change background color of the Main menu 
• Change the yellow highlighted text to change font color, size and family 
• Change #BF0100 to change the background of a tab on mouse hover 
• Change #BF0100 to change the background color of the drop down menu 
• Change #060505 to change the background color of drop down menu on mouse hover 

7. Save your template and you are done!