How to Add Beautiful Drop-Down Menu to Blogger Blogs


I was recently asked by some of this blog loyal reader that I should make a post on how they can add a beautiful drop-down menu to their blogger blog.

Drop-down-menu-for blogger

Presently, there are many ways to add a drop-down menu to blogger blogs but most of these methods are sometime complicated or wrong. So today, a simple and easy method will be explained here on how a beautiful drop-down menu can be added to blogger blogs and how you can easily customize it to your taste.

1. Go to Blogger Dashboard ==>Template ==> Edit HTML

2. Now search for ]]></b:skin> in your template. This can be easily searched for by using CTRL + F.

3. Paste the code below above the code stated in the 2nd step.

.menu{
border: 2px solid black;
margin:0px;
padding:0px;
font: 67.5% “Century Gothic”, “Bitstream Vera Sans”, “Trebuchet Unicode MS”, “Lucida Grande”, Verdana, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
}
.menu ul{
background: pink;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background: pink;
color: black;
display:block;
font-weight: normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: black;
color: lightblue;
text-decoration:none;
}
.menu li ul{
background: pink;
display: none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background: ;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background: ;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: lightblue;
border: 0px solid black;
color: black;
text-decoration:none;
}
.menu p{
clear:left;
}  

 Click Here For Guide on How To Customize This Section

4.Now save your template then go back to “Layout” and add an “HTML/JavaScript” widget. Then copy and paste the code below into the “HTML/Javascript Widget” box:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
    <title></title>
    <link rel=”stylesheet” href=”menu_style.css” type=”text/css” />
    </head>
    <body>
    <br>
    <br>
    <div class=”menu”>
    <ul>
    <li><a href=”#” >Home</a></li>
    <li><a href=”#” >About Us</a></li>
    <li><a href=”#”>Recipes</a>
    <ul>
    <li><a href=”#”>Breakfast</a></li>
    <li><a href=”#”>Lunch</a></li>
    <li><a href=”#”>Dinner</a></li>
    <li><a href=”#”>Dessert</a></li>
    </ul>
    </li>
    <li><a href=”#”>Photography<br />
    </a>
    <ul>
    <li><a href=”#”>Babies</a></li>
    <li><a href=”#”>Families</a></li>
    <li><a href=”#”>Seniors</a></li>
    </ul>
    </li>
    <li><a href=”#”>Crafts</a>
    <ul>
    <li><a href=”#”>Scrapbooking</a></li>
    <li><a href=”#”>Kids Crafts</a></li>
    </ul>
    </li>
    <li><a href=”#”>Contact</a></li>
    </ul>
    </div>

    </body>
    </html> 

 Click Here For Guide on How To Customize This Section

5. Finally, drag the widget to the area where you want it to show.

If you follow this tutorial carefully, you should have something related to the image shown below:

Drop-Down-Menu-Demo

Use the comment box for questions and suggestions.


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook5Tweet about this on Twitter0Share on Google+1Pin on Pinterest0Share on StumbleUpon0Digg this

Comments

  1. Guy u are the best,i love everytin abt you .you can take a look at my site nd dnt forget lik us on fb

  2. I added the drop down navigation but I don’t like the color

  3. Guy tank u… U a gud teacher have don it… But how will i change it..cos i could see kids corner..etc plz help

  4. @Nandani Vijay, follow the steps as explained.

  5. Nandani Vijay says:

    I WANT ADD THIS HTML BUT I CANT ADD IT PLZ HELP ME

  6. Endy Edeson News Network says:

    good tips

  7. @David Abaye, you're welcome.

  8. DAVID ABAYE says:

    thank you so much.

  9. @jwax, what I mean is that you shold go and add a HTML/JvaScript widget from layout section.

  10. i can’t locate the javascript in the layout window so that i can paste the second code

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*