css dropdown menu for blogger

Navigation styling is the most important thing that increase not only the beauty of your blog/website but also readers engagement if they find it easy. In this post I am gonna show you a best pure CSS3 menus that you can use in your website./blog. These menus are pure CSS without the use of java script and j query which means it doesn't have any effect on your blog page loading speed.  These menus are professionally designed with great look
. You can make dropdown and sub dropdown menus as many as you want. If color gradient or anything else doesn’t meet your taste you can customize it and make it as you like. You may face the problem of width and margin, don’t worry adjust everything as your template require. We tried the best that we have if you face any problem regarding installing this widget in your template leave a comment and let us know.

Three level drop down

Live Demo

CSS drop down menue for blogger

Get started and grab this!
Below is the simple process to add These professional menues.
1) Login to your blogger dashboard.
2) Template >> backup  your template >> edit HTML.
Now, what you have to do is to search
     <div id='header-wrapper'>
Under this id search for the existing menu HTML and replace the below code with existing menu HTML or place the below code where you want.

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a>

<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>

</li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Don't change the id until it collapse with other existing id.
Now search for
</b:skin>

And paste the below CSS above the </b:skin>.

#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color:#fafafa;
background-color: rgb(8, 124, 32);
background-image: linear-gradient(rgb(44, 236, 4), rgb(25, 99, 37));
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;

}
*html #menu li a:hover { /* IE6 only */

color #fafafa;

}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;  
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;  
}
#menu ul a {  
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: rgb(1, 186, 31);
background-image: linear-gradient(rgb(40, 146, 32), rgb(32, 162, 7));
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}

Save your template and see your success!
If you like this article do leave a comment, share and join us for future posts.