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

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(http://1.bp.blogspot.com/-JUhuaCgwKV8/TakCkjrqw5I/AAAAAAAAAEg/cGwQSsoqIKg/s1600/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(http://4.bp.blogspot.com/-I8oro79lVUE/TakCleWKO3I/AAAAAAAAAEk/jDsKRHm2TsM/s1600/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(http://4.bp.blogspot.com/-pk_xty4vHkU/TakCjmjp7XI/AAAAAAAAAEY/yJhulD02I7A/s1600/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(http://2.bp.blogspot.com/-0V12pHdp1_I/TakCkYRA_xI/AAAAAAAAAEc/TzsvI06qryY/s1600/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(http://4.bp.blogspot.com/-YEXnPOjTSpE/TakCl_w0ZoI/AAAAAAAAAEo/PpQJq4rsGjY/s1600/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(http://1.bp.blogspot.com/-B7HdmEJ6dV4/TakCmMsgT_I/AAAAAAAAAEs/fduuyLTFrTs/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”

2 Responses to “Simple Multilevel Drop Down Navigation Menu For Blogger-CSS3”

  1. Utsav Chopra says:

    Nice..

    Drop down menues..

    thanks.

Leave a Reply

CommentLuv badge

© 2017 Daily Blog Tools. All rights reserved. Site Admin · Entries RSS · Comments RSS
Powered by WordPress · Designed by Theme Junkie