How to add CSS3 Drop Down Menu in Blogger blog?

Drop Down menu is the beauty in a blog's design. It looks pretty much cool when someone hovers the mouse and the list opens. These menus hold all the links inside the parent menu. There are two kind of links used in drop down menus, the one is parent link and the others are children. So the parent link actually doesn't have any link to follow, but it holds all the children links, so when the visitor hovers the mouse to parent the list of children open.

These menus used to create in HTML, CSS and with extra codes of jQuery. And you know jQuery is a library of JavaScript and JavaScript is more heavier web language thanHTML and CSS. Because the browser takes time to load JavaScript codes.

You may like to read: Customize Blogger Popular Posts

But the Good news is, now we can create a drop down menu only by using CSS3 and HTML. So our today's menu will also be only in HTML and CSS. The big advantage of using CSS menu is; it loads faster and without irritating the browser it get displayed in seconds. In this tutorial, we'll learn how to add a CSS3 Drop down menu to our blogger blog. Let's start without delaying you further.

Before straight going to the tutorial we should first check the demo for this: Click to See DEMO

How to Add CSS menu to Blogger?

We'll add a beautiful CSS drop down menu to our blogger, but our codes will be containing two parts. The first part will be CSS codes for that menu and the second will be HTML codes. So we need to add both of them carefully and then show the menu on your blog. Below Steps are easy to follow:

Adding CSS Codes into Blogger

• Go to Blogger Dashboard
• Template >> HTML >> Proceed
• Now Find this code </b:skin>
• Now copy below code paste right before </b:skin>

#navMenu {
margin:0;
width:auto;
margin-bottom:5px;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#369;
}
#navMenu ul li a {
text-align:center;
height:30px;
width:140px;
display:block;
font-family:"Georgia", cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}
/*sets top level hover color*/
#navMenu li:hover {
background:#09F;
}
/*sets link items hover color and background*/
#navMenu ul li:hover ul li a:hover {
color:#000;
background:#CCC;
}
/* Changes text color on hover for main menu hover*/
#navMenu a:hover {
color:#000;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
}
/* IE7 Display Fix */
#navMenu ul li {
display: inline;
}

Save your template and you've successfully added the CSS part of this drop down menu.

Adding HTML codes to your blog

Now after having added the css part, you'll have to add the HTML part of this menu, because CSS is just for styling the menu, while by using HTML you will display the menu on your blog. Mostly the menu is kept in the header or in navigation bar, so you should keep at below the header. Now follow steps to add HTML codes:

• Go to Blogger >> Layout
• Add a Gadget >> Select the HTML/JavaScript Gadget from the list
• Copy below code and paste it inside that HTML/JavaScript Widget

<div align="center">
<div id="navMenu">
<ul>
<li> <a href="#">Ms Office</a>
<ul>
<li><a href="#">Office in Urdu</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Graphics Designing</a>
<ul>
<li><a href="#">Graphics in Urdu</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Web Designing</a>
<ul>
<li><a href="#">Web Designing</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Web Development</a>
<ul>
<li><a href="#">Web Development</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">SEO & Others</a>
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Blogger SEO </a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Accounting</a>
<ul>
<li><a href="#">Accounting</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
<ul>
<li> <a href="#">Making Money</a>
<ul>
<li><a href="#> Earn Money Online</a></li>
<li><a href="#">Google Adsense</a></li>
<li><a href="#">Affiliate Marketing</a></li>
<li><a href="#">Earn with PPC</a></li>
<li><a href="#">Freelancing</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div> </div><!-- end navMenu -->

Save the widget, drag it below the header, see the example image below:

Customization:

You can easily customize this menu by yourself. I'll give you the important parts which you can customize according to your requirements.

• The 30px blue color value is set for the height of the UL tag, so if you need larger or lesser than that you can edit increase or decrease it.
• The #369 red color value is set for the background of an LI tag, so you can change it with any color you like.
• 30px pink color is value is the hieght of the link, so it should be as same as the line height of an UL. 
• The 140px brown colored value is for the with of the link, so if you have large text and that is not fixing in the current width, you can increase it, also you can decrease the width of the link.
• More customization is also possible, you can custimize each part of this menu by changing the values of CSS properties.
• Also change the anchor texts to your own which are these web designing, graphics, SEO & Others, Ms Office, Accounting etc, these are the texts you can change with your own. And to change the link for each of the text just replace the (#) sign with your link.
• If you want to remove or add more links or tabs then simply copy the one block code and paste below or in between. If you want to add an entire tab then simply copy a code like below one and add it or in between the menu:

<ul>
<li> <a href="#">Graphics Designing</a>
<ul>
<li><a href="#">Graphics in Urdu</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->

• And if you want to increase a link inside the drop down list then simply copy below line and paste it repeatedly as many as you want below the same line.

<li><a href="#">Graphics in Urdu</a></li>

Every time you edit the widget, just save the widget and see the result by viewing your blog and Enjoy the beautiful CSS drop down menu.

Extras:
I have tried my best to give you all the details about about this menu, however, you can ask questions by using comment box below the post.