CSS3 Dropdown Menu For Blogspot

This is one of my favorite navigation menu’s made with CSS3. I’ve tried to bloggerize this many days before but the original tut provider didn’t provide the CSS code and the HTML. At last I got it! Hope you defnitely like this and add it in your blogger

Demo

View Demo

HTML

For New Blogger Interface

Go to blogger.com and then click the arrow mark just beside the View Blog button then select Layout and then click Add a Gadget > HTML/JavaScript and paste the below code

<ul id=”nav”>
<li>
<a href=”http://www.techwales.com/”>Home</a></li>
<li><a href=”#”>My Projects</a>
<ul>
<li><a href=”http://www.techwales.com/”>Blogger Tricks</a>
<ul>
<li><a href=”#”>Design</a></li>
<li><a href=”#”>WordPress Themes</a></li>
<li><a href=”#”>Wallpapers</a></li>
<li><a href=”#”>Illustrator Tutorials</a></li>
</ul>
</li>
<li><a href=”#”>Web Designer Wall</a>
<ul>
<li><a href=”#”>Design Job Wall</a></li>
</ul>
</li>
<li><a href=”#”>IconDock</a></li>
<li><a href=”#”>Best Web Gallery</a></li>
</ul>
</li>
<li><a href=”#”>Multi-Levels</a>                   <ul>
<li><a href=”#”>Team</a>                                      <ul>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a>
<ul>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
</ul></li><li><a href=”#”>Sub-Level Item</a></li>
</ul></li><li><a href=”#”>Sales</a></li>
<li><a href=”#”>Another Link</a></li>
<li><a href=”#”>Department</a>
<ul>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
<li><a href=”#”>Sub-Level Item</a></li>
</ul></li></ul></li><li><a href=”#”>About</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>

For Old Blogger Interface

If you’re using the old blogger interface then go to blogger.com > Design > Add a Gadget > HTML/JavaScript and use the same HTML code given above

CSS

Please switch to Old Blogger Interface while you see tutorials like this, because finding and pasting codes in the New Interface is difficult unless you are a professional blogspot blogger 
After you’ve switched to the Old Blogger click Design > Edit HTML and now using the Ctrl + F option find </b:skin> and then paste the below code and then click save template

#nav {
margin: 0;
padding: 7px 6px 0;
background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp6LmgvCGcHZ-C7dme-QHkQEMorpLe6m3ljBQbCm8ovE6Hmtddta9KvnnJDp5UD5hDX7b2eMhrx2kOIpdsjKDtM9yvkRIapPN5kTw5RGyUlrbaEB6HpBhf03mFg0yMaAot_yoQBB1eI-T/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp6LmgvCGcHZ-C7dme-QHkQEMorpLe6m3ljBQbCm8ovE6Hmtddta9KvnnJDp5UD5hDX7b2eMhrx2kOIpdsjKDtM9yvkRIapPN5kTw5RGyUlrbaEB6HpBhf03mFg0yMaAot_yoQBB1eI-T/s1600/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp6LmgvCGcHZ-C7dme-QHkQEMorpLe6m3ljBQbCm8ovE6Hmtddta9KvnnJDp5UD5hDX7b2eMhrx2kOIpdsjKDtM9yvkRIapPN5kTw5RGyUlrbaEB6HpBhf03mFg0yMaAot_yoQBB1eI-T/s1600/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCp6LmgvCGcHZ-C7dme-QHkQEMorpLe6m3ljBQbCm8ovE6Hmtddta9KvnnJDp5UD5hDX7b2eMhrx2kOIpdsjKDtM9yvkRIapPN5kTw5RGyUlrbaEB6HpBhf03mFg0yMaAot_yoQBB1eI-T/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}

Lastly,

If you’ve added this navigation menu in your blog or if you’ve liked this article then please don’t forget to  comment.
Source:Paulsantosh