November 27, 2011

CSS3 Multi-Level Drop Down Menu


Multi-level Drop Down Menu
It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties. It is compatible with all major browsers like FireFox, Chrome and Safari. Since IE7+  always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have kept the installation extremely easy. You just need to copy and paste the code. This Menu  is provided by webDesignerWall guys and it is widgetized and made compatible with Blogspot blog platform by MBT.



Live Demo

Add multi-level drop down menu To Blogger

The steps are as usual kept cute and simple. Follow these easy steps:
  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript gadget
  3. Paste the giant code below inside it,
<style>
#MBT-Container {
    font: normal 1em Arial, Helvetica, sans-serif;
     width:100%; float:left;   
}
a {
    color: #333;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #0080ff url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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: #0080ff url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
text-align:left;
    -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;
text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/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;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>
               
<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>
                   
<li><a href="#">Sub-Level Item 1</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 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>   
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>
The best part about this menu is that you can give it any colour you want because here we are using a transparent gradient image which can take any colour you want. Like:
different colours
Now kindly make these customization changes:
  • Each TAB can be edited by understanding the following simple HTML code,
<li><a href="#">TAB TEXT</a></li>
In each case replace the hash sign (#) with your page URL/link and replace the text with your page title. I have kept the page titles unchanged in the code above so that you could easily edit them by seeing the demo.
  • To change the color of the menu simply replace #0080ff with a colour of your choice. You may use our Color Generator tool
That's it! Save your widget and see the magic right in your blogs! :)

Need Help?

If you need extra help in removing rows or columns then please feel free to post your questions. Tell me the specific row and column so that I could share your preferred code in the comments. You can discus it as much with me as possible. This will help others to better understand on how to make further changes. Peace and blessings buddies. :)




If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

52 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Great Drop Down Menu And Also A Very Stylish Thanks For This.

    ReplyDelete
  2. Another Good blogger Widget by MBT. :)

    ReplyDelete
  3. does not working..
    chk it out here:http://freestuff4pc.blogspot.com/

    ReplyDelete
  4. HHhhmmm....

    Nice one...Thanks For it dude..
    (^-^)..

    ReplyDelete
  5. great to see you back:)
    nice post...why don't you use the same in MBT?

    ReplyDelete
  6. hello freinds i have to creat a css drop down menu and put in my page it works good but it is look a page bottom left side so pls help me freinds how can edit my drop down menu in my blog center
    my blog here:-http://riddik-worldhacker.blogspot.com
    guys pls replay me

    ReplyDelete
  7. Thank you for finding it useful brothers. :)

    @skk

    You are adding it to new blogger templates Please read the tutorial below only till step#2 and come back and try this one.
    Templates by Blogger

    @Aiman
    I guess that's not a bad idea. But I will change few things when free. Thanks for suggesting. :)

    @N!яaנ BαTнwaя✌
    Please enclose your menu code between these two additional lines:
    <div style="float:right">
    YOur MENU CODE HERE
    </div>


    It will work just fine. :>

    ReplyDelete
  8. Great tutorial. Works... with the only limitation that the 'home' button stays always on, no matter which page you are on. Think has something to do with the

    class="current"

    But his doesn't change when I go to another page / web address.
    Did I miss something here? Is it not updating itself according to the page it is on like the standard 'pages' menu?
    Perhaps you can help...

    ReplyDelete
  9. @viob

    You are right viob. For making that dynamic effect we would need some jacascript and since most CSS menus are based on static codes therefore we manually have to set one button (in most cases the Home) as the Active Button.
    But I would look on how to add a small snippet of javascript to it to make things work even in these menus.

    ReplyDelete
  10. Hello Sir, I am a problem on my website. I was expecting the Code you provide will take effect on the upper portion above the 6 ads. But unfortunately it gone on the left side of the screen.

    ReplyDelete
  11. Sir Mohammad,

    How can I apply it on my site. http://kennstop.blogspot.com/
    I want to replace the Drop Down that can be found above the banners into my own.

    * Home
    * Posts RSS
    * Comments RSS
    * Edit

    ReplyDelete
  12. I have visited
    I want to create a menu like this which you have created. This one is available on second line.

    (Home CSS Codes Forums Tools JavaScript CSS Gallery)

    I hope you understand what I am indicating you.

    ReplyDelete
  13. I have visited http://zailab.blogspot.com/
    I want to create a menu like this which you have created. This one is available on second line.

    (Home CSS Codes Forums Tools JavaScript CSS Gallery)

    I hope you understand what I am indicating you.

    ReplyDelete
  14. tried putting this on my site but.. the dropdown doesn't fully show..

    ReplyDelete
  15. Dear I like this post so much and I also made it for my website,

    dear I face a problem plz check my website http://www.channelspk.in/

    the link list shows behind the featured post how I make it in front?

    plz give urgent reply

    ReplyDelete
  16. http://gowallpapers13.blogspot.com/

    ReplyDelete
  17. Help me Please my drop down list is not shown please tell me how can i fix it...

    http://zaheerassociates.blogspot.com/

    ReplyDelete
  18. Friend Mohammad, I am having some problem implementing your drop-down menu code.

    Now it's not the actual editing of it or anything, but for some strange reason the 'drop down' part of this component does not display properly.

    My website is www.comicbookandmoviereviews.com, please contact me via it when you can, and I will send you a screen shot of what is going on.

    In turn, I am more than happy to promote your site via mine as a form of a thank you.

    Kind regards my friend, and in your debt.

    Jay

    ReplyDelete
  19. My dropdown list is blocked by posts. Now what to do?

    ReplyDelete
  20. Hello,
    The code works great, except I can not find a place for the widget. When I place the widget containing this code above other posts/widgets, it interferes with the drop down list. When I try to move it to the right/left of my page (making it vertical) the drop down list overlaps itself, making it unreadable. Is there a way to make this vertical with the drop down menu popping out to the right instead of straight down?

    ReplyDelete
  21. SIR MY THIS DROP DOWN IS NOT WORKING IN MY BLOG PLEASE CHECK...
    WWW.WORLD-CAREER.BLOGSPOT.COM

    ReplyDelete
  22. salam,
    i sucessfully added the drop down menu,
    it is showing but the menu doesnt come down,

    ReplyDelete
  23. I'm having some trouble with this one. For some reason the actual dropdowns fall behind my actual blog template. It's also not centered at the top

    http://betaeqd.blogspot.com/

    For an example. Not too sure what to do there!

    ReplyDelete
  24. I have a photography blog and for about a month I am trying to place a proper menu but I just can't figure it out. I know some basic HTML and CSS editing but how do i proceed if I want the `Multi-Levels` tab to be a category in my blog...for example Macro or Landscape? I want that when I click `Macro` to show all the post that are categorised so. I really don't know what to do.

    ReplyDelete
  25. You can check my blog at www.alextphoto.blogspot.com...it's in romanian so I don't think that you will understand something...:)

    ReplyDelete
  26. Thanks a lot i use this trick in my blog
    http://quizvook.blogspot.in/

    ReplyDelete
  27. Thank you Sir, That's great subject from you!

    ReplyDelete
  28. @Mohammad Mustafa Ahmedzaidrop down menu is not showing its sub tabs help me my blog www.pardhafun.blogspot.com
    i have placed it down in my blog
    pls reply me

    ReplyDelete
  29. for all drop down problems replace this code /* dropdown */
    #nav li:hover > ul {
    display: block;
    }
    /* level 2 list */
    #nav ul {
    display: none;
    text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    and put this
    /* dropdown */
    #nav li:hover > ul {
    display: block;
    z-index: 9999;
    }
    /* level 2 list */
    #nav ul {
    z-index: 9999;
    display: none;
    text-align:left;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;

    ReplyDelete
  30. the sub meny is not visible ,,as it gets hide bihind the blog posts ,,plzz help

    ReplyDelete
  31. hy wwww.teknxt.net iz my blog plzz do check it for tech updates ,,latest launches,,future technology and some funny tech picz ...hope you would enjoy reding my posts

    ReplyDelete
  32. Very fine stylish menu...but its not working properly. The drop-down menu is not showing properly. Plzz help. :)))

    ReplyDelete
  33. Very helpful though it's kind of tough!!!
    Thanks for the article!

    ReplyDelete
  34. Its Show Correctly On My Blog But The Dropdown Menu Was Not Show Correctly On My Blog What Is Going On...???

    Please Help Me Thanks

    ReplyDelete
  35. I really like it! Thanx!

    However I do have a little problem. My drop-down hide behind the wrapper and the first post.

    How could I fix it?

    ReplyDelete
  36. @Syed Bahadur Shah I got the same problem... the drop down menu drops behind the post :(
    see Categories on my blog www.iDevizes.com

    ps Like your blog with very cool widgets, tips and tricks!

    ReplyDelete
  37. thats can not work perfecthly see this
    http://vishalsharmalife.blogspot.in

    ReplyDelete
  38. sub menu hide behind on the post,,, pls resolve my problem

    ReplyDelete
  39. Assalamualaikum Ya muhammad

    I try to used this code in my Blog
    http://menggapaiprofitimpian.blogspot.com/
    but not work properly. Please help me to fix it

    ReplyDelete
  40. Hi,

    Thanks for this amazing blog full of useful tips. Some time ago I have installed this drop down menu http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html
    but now I would like to add one more level to this one - is it possible?

    Thanks in advance!
    Ana

    ReplyDelete
  41. i used your drop menu its working properly but the sub groups column is going below my posts i cant see that dropped bar....its goining below my posts plese help me..!!!

    ReplyDelete
  42. Sir,

    I am unable to add this menu style to my template, sir can you please help me in adding this menu style to my blog i.e. (http://quickyportal.blogspot.in) i will be thankful to you

    ReplyDelete
  43. sir, your drop down menu works but the sub menu( what im mostly interested in) is not working please probvide the correct coding for it

    ReplyDelete
  44. Hi the menu is good but the drop downs go directly behind my posts so you cant see them. How do we fix that

    Thanks

    ReplyDelete
  45. This comment has been removed by the author.

    ReplyDelete
  46. Did anyone ever figure out a solution to the problem of the submenus hiding behind the posts?

    ReplyDelete
  47. I have tried the fix posted in the comments but it hasn't helped.


    Please take a look and advise!

    http://rosetintedcreations.blogspot.co.uk/


    Also how do I change the code so that the menu bar spans the whole width of the page?

    Thanks for putting this code up on your blog it has been very helpful, I just don't know enough to sort out these niggles!

    ReplyDelete
  48. While I make it, according to steps you told me, the drop down menu come on the gadget but it is not coming on main screen.

    Kindly chk this one

    www.orionmust.blogspot.com

    ReplyDelete
  49. Sir First Of All I Would To Thanks To You Because It Was Too Long Time That I Need Good Drop Down Menu But Now Finally I Got It To Your Blogtricks.

    I Done Some Changing In This Drop Down Menu Like "Background Coloure,Text Style And Removing Unnecessary Sub Menu,Its Look Like Awesome That I Wish To See At My Blog,I Am Happy With This And Now I've Good Drop Down Menu So If I Need Some More Main Contene So I'll Simply Add Some Submenu As Required...

    Thanks Once Again For Help Me In My Problem,Now I Am Happy And Feel Good With My Blog.

    Here's The My Drop Down Menu Screen Shot :-)

    http://oi57.tinypic.com/2mi0ttz.jpg
    fun4here.blogspot.com

    ReplyDelete
  50. dropdown menu = fixed

    just put at head area

    te6jiwaku.blogspot.com

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!