Simple Multilevel Drop Down Navigation Menu For Blogger-CSS3

Add This Simple Multilevel Drop Down Navigation Menu For Your Blogger Blog.All Credits Go To Paul Santhosh For This CSS3 Code.

Demo

Add Multilevel Drop Down Menu

Drop Down Navigation Menu For Blogger

Add the HTML

Go to blogger >> Design >> Add a gadget >> HTML/JavaScript and place the HTML below and click save.

<ul id=”menu”>
<li><a href=”#”>Home <span></span>
</a></li> <li><a href=”#”>About <span></span>
</a></li> <li><a href=”#”>RSS <span></span></a>
</li></ul>

After saving this you won’t see any advanced and fancy menu in your blog. So, we have tostyle it with CSS.

Add the CSS

Now click “Edit HTML” and find ]]></b:skin> and just above it paste the below CSS code

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRP6dq61kgBRL7aPzwMwyksdmV2JoOVZrdu2XGgoQ4WMsNJfNi8nwcMKg-dZydWQn-kMx2eVZnT86_SEYNdDAGHIDAC0GqqG6-bvCEeGUgqA8HKbcbyXXUI9VmlYbbuPKCjfRPVtQTl-qB/s1600/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrCsliY3MbLiwm4gy7krqpi9IKwudjsv_1oIuKaU7yJgLdMOERxX18WWD8mFdk-vse3PH5Pdr49anRPnVrf0CUBt5a9PqmcijA70_y6UZ_4UWkKzCwz_BUBbaJAKPzdi7r3Lh6Y7LGO6Xn/s1600/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjL4EdGQuad2XyqDXu2v54xkojxxaz2FRRu79tIOE3RGFqe-DNExoXTyR-j3PN0qhf4sgnd8jnViZo6Ol4SIvhBSzvlsc5QrORGeEZshZdYlBy6XIPIBZx3azysi7og-_g2k6O0RkrYR-/s1600/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkDa2omMiMuRxE_HnsP5e0fUOk8TFY0QeNbplZoxg1-7d4dHrpxfm5FNb-RiqQU7GNXEqX-75c3X0qJDc2ZbmTS7uCzicsI1KUclNt1f_WErESgRsaBrOJ7VyNE9vBp95cHjtoUaUmIoO/s1600/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MS_bf4jdPBTi5JcGB7xxfBFwmVKaUIgPvUX48ld4qq2pGR3dHbrp2WTArPQswVLQxJX3JjORK02bsrhVBDCwyrGsn_DlADk8l_Lzwkkl899pTS9-CK7PWelR_NFTv5M5g8pWSk_1Qfja/s1600/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYU_odubROqd9CeJJLYVpmzlnRf8Mu99rG15iy6jCD5G5bVa6bXCm67chkP0TFH7kptCWUU7ZfD0p2mDMadeeSzRbCPqbx6p3HfSqQFlRGBGa39aT9yk2OYbZJ3h86fM0L4ECeEl994hL/s1600/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Hope You Are Enjoyed This Tutorial .Subscribe For Our RSS Feed To Get More Tutorials To Your Mail.Use Below Subscription Options.Enjoy “Simple Multilevel Drop Down Navigation Menu For Blogger-CSS3?