Multilevel Drop Down Navigation Menus: Examples and Tutorials

April 17th, 2008

Navigation menus are the most important element one should pay attention when designing a website. Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website.

This article presents over 25 (horizontal and vertical) multilevel drop down menu built using Javascript and CSS which you can use in your future projects. Also you will find some useful tutorials at the end of this post where you can use to start building your own multilevel navigation menu.

You might check out these posts as well:

Horizontal and vertical drop down menus

1) Drop Down Tabs (5 styles)– Drop Down Tabs is a horizontal CSS tabs menu that supports a second level drop down menu for each of its tabs.

2) Professional Dropdown

3) Multi-level effect menu– Is a very configurable javascript/css hybrid dropdown menu that is capable of producing simple menus(both horizontal and vertical).

4) FastFind Menu– A jQuery nested menus, based on dynamic “AJAX” responses. The menu can also be dragged/dropped.

5) jQuery SuckerFish– Replicate Suckerfish Menus.

6) Fancy Sliding Tab Menu using

7) List Based Menu with Images– This is a menu based on an unordered list (<UL><LI>). It makes the menu easy to use and friendly to search engines.

8 ) Slide down menu– A slide menu based on an unordered list (<UL><LI>).

9) Dropdownmenu made with scriptaculous/prototype– A multi level drop down menu.

10) Suckerfish-style menu plugin for jQuery– This demonstrates a two-tiered horizontal menu that displays the path to the current page when the menu is in its idle state.

11) Building a dynamic drop down menu

12) onMenuOpen onMenuCollapse Events– This is a one-time effect that shows off the menu opening up and firing an event, and then finishing with another event.

13) Mootools menu with accordion and effects– This simple menu has a neat effect by hovering over the links, and opens a submenu with an accordion.

14) Mootools Unlimited Drop Menu

15) Creating an Outlook Navigation Bar– Using the ListView and Accordion Controls

16) Simple CSS vertical menu Digg-like– This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

17) Drop down menu with Prototype– A unique drop down navigation that recursively applies a function to an li that toggles the visibility of a nested ul element.

18) Drop down menu with nested submenus– Using CSS and a little JavaScript

19) Drop down menu with jquery– A drop down animated menu example made with jquery

20) jdMenu Hierarchical Menu– The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

21) jQuery plugin: Treeview– Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

22) Drop Down menu

23) Accessible fold-out menu

24) Accordion Menu script– This example illustrates how you would add a collapsible sub level.

25) Complex Dynamic Lists– Using an unordered list, to display a hierarchical structure of a complexity that would be very hard to achieve with dynamic select boxes.

26) Chrome CSS Drop Down Menu– Chrome Menu is a CSS and JavaScript hybrid drop down menu. It’s easy to configure and search engine friendly.

Drop Down Menu Tutorials

CSS Pop-Out Menu Tutorial

CSS Express Drop-Down Menus– CSS Express menus should only be used in a horizontal orientation with a single drop-down level.

Son of Suckerfish Dropdowns– An accessible, light weight (just 12 lines of JavaScript), with great compatibility and can have multiple-levels.

Drop Down Menu Generator

Izzymenu– With an impressive Ajax interface, you can build your own CSS drop down DHTML sub-menu in minutes without writing a single line of code.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

106 comments for „Multilevel Drop Down Navigation Menus: Examples and Tutorials
  1. Siddharth on April 17th, 2008 at 12:27 pm

    Nice tutorial here, I use Dreamweaver for web design and in My opinion, sub categories navigation is not so good looking in vertical menu. But I like them as drop down in horizontal navigation. Off course who like opening a door and finding one more door in it? :-)

  2. jeremy on April 17th, 2008 at 3:42 pm

    People are still using multilevel drop down menus?

  3. Gunner Si on April 17th, 2008 at 4:44 pm

    Sweet post! An option for every use, i was just looking at these at work today. These are a pain in the @ss to handcode! Thanks for the linkage

  4. chris on April 18th, 2008 at 8:14 am

    sweet set! now to show off mine:

    built using scriptaculous/prototype. Thought i’d spice things up a bit!

  5. Anthony Ettinger on April 18th, 2008 at 11:34 am

    Great solutions…I find the 2nd level tabs don’t work well, since IE6 doesn’t like punching out of the parent’s container.

  6. knurów on April 23rd, 2008 at 1:40 pm

    thanks, I was looking for drop down menu and I found this list :)

  7. Acronyms on April 27th, 2008 at 1:22 am

    Drop downs are old school.

  8. C on April 28th, 2008 at 5:03 am

    Please don’t use multi-level drop downs. They are html evil incarnate! If you find yourself in a situation where you have no choice, you took a wrong turn somewhere and need to go back and retrace your steps.

    • D on April 23rd, 2011 at 3:44 pm

      Mr.C. You are right. After having incorporating HVMenu, now I am finding it as a trouble. When I work with CSS for printing purpose, the multilevel HVMenu gives me headache as it is not hiding. Only when I want to overcome the problem, I found your comment!. How exactly it is true. As you said, now I am retracing my steps by wasting a lot of time.

  9. C on April 28th, 2008 at 5:04 am

    I should say that single level drop downs are ok and in many places a good design choice, just avoid taking them multi-level.

  10. Ajay kamat on May 3rd, 2008 at 4:31 am

    cool !!
    realy gud menu.

    thanks buddy.

    Ajay Kamat

    • Baroda Design on February 23rd, 2012 at 5:53 am

      This is really awesome. very usefull one.. great work

  11. M.S. Babaei on May 11th, 2008 at 9:19 am

    great thanks!

    it’s very useful!

    I worked for hours and hours and make nothing

    thanks again!!!

  12. .wired on May 30th, 2008 at 9:29 am

    Wanted to add my dropdown navigation tutorial, too:


  13. zipper on June 5th, 2008 at 12:11 am

    very cool)) thanks so much!!!

  14. Chris on June 24th, 2008 at 12:11 pm

    what about accessibility (508) and JAWS reading submenu items? I can’t get the readers to “see” the submenus. I have run into this problem with no solution.

  15. Subhash on July 18th, 2008 at 4:25 am

    where are the files to download in “Mootools menu with accordion and effects”.

  16. kacupeng on July 22nd, 2008 at 9:41 pm

    i have question for you !!!

    can i put professional drop down menu in my blog site???
    how can i get it ???
    could you tell me please how to put drop down menu in my blog ???

    thanks before

  17. Ahmad on October 8th, 2008 at 7:46 pm

    I do not know what to say really! These menus are truly awesome, and I never seen most of them.. thanks!

  18. Eric on November 10th, 2008 at 7:17 am

    great list.

  19. Mark on November 12th, 2008 at 6:18 am

    Very useful info. Thanks for sharing!

  20. Ixalmida on October 27th, 2009 at 1:41 pm

    I’d like to add my 2 cents on multi-level drop-downs. I agree that in most cases they make a site too “busy.” However, they have their place and appeal to a certain audience (especially in b2b apps). For example, if you’ve ever been on the Dell Premier site, you know you would KILL for a multi-level nav menu so you don’t have to wait for their agonizingly slow pages to load.

    I think the important thing is not to FORCE a user to use multi-level navigation. In other words, every item in the header menu should be clickable. The same wich each item in every level of the sub-menus. So if the user doesn’t want to deal with the menus, they can bypass them and be taken to a wizard-like page instead. This allows you to appeal to the type-A’s who will use the multi-menus as well as the slackers who want to be led by the hand.

  21. Atle on November 29th, 2009 at 3:37 am

    Great list of menus. Thanks! :)

  22. feald on December 4th, 2009 at 4:19 am

    Great resource , thanks for menus !

  23. Don on December 4th, 2009 at 1:13 pm

    I have downloaded your scriptaculous multi level dropdown menu and converted it for my website It is working, but firebug reports:- “uncaught exception: requires the Prototype JavaScript framework >=
    Line 0″”
    Safari reports an RJS error.
    When I replace the prototype that I am using ( to the menu does not work. I developed the menu on a local copy using Mongrel, Ruby 1.8.7, Rails 2.3.4, Scriptaculous 1.8.3, Prototype The javascripts came with the scriptaculous download. Firebug also does report an uncaught exception.
    My website host server is using Ruby 1.8.6 and Rails 2.2.2.
    Is there a reason that you know about for this error.

    • Don on December 8th, 2009 at 2:49 pm

      I solved my problem. What I did was to create a blank rails application and copy all the javascript files to my website overwriting those I downloaded with Scriptaculous. Bingo no more errors. The fact that my ISP server is usingh 2.2.2 and not 2.3.4 does not seem to matter.

  24. Archit Shah on December 20th, 2009 at 9:24 pm

    its great 1

  25. Pisit on January 3rd, 2010 at 7:51 pm

    Appreciate, thank for the sharing

  26. selva comments on January 5th, 2010 at 9:55 pm

    Thank you … this has me very helped.useful list

  27. Mathan on January 11th, 2010 at 8:14 am

    useful information for nav menu.
    Thanks for sharing this tut..

  28. sabari on January 16th, 2010 at 2:07 am

    simply good!!!!!!!!! my requirement s over

  29. ajans on January 24th, 2010 at 2:42 am

    nice i like it..

  30. Mature singles dating on January 26th, 2010 at 8:01 pm

    Great list! Navigation menu are greatly important for usability purposes and creating a user-friendly website.

  31. Eni on February 27th, 2010 at 10:14 am

    I’m still trying…
    What a nice view, by adding this dropdown menu to my blog…

  32. Ali on February 27th, 2010 at 10:17 am

    Good recommendation, Many dropdown menu tutorial on sites… but yours are the best

  33. John on March 4th, 2010 at 10:29 am

    Great Post…

  34. Vijendra Mishra on March 5th, 2010 at 2:56 am

    Nice Post with great resources… thanks

  35. Marilee Lindenberg on March 5th, 2010 at 11:02 am

    Dreamweaver has been lately my personal goto application for years. I truly don’t know what I would undoubtedly do without having it. There were moments when I initially started out making use of the program, and I thought it was way too complicated. Now I fly around it, and it has become a strong asset in my personal tool box. Nonetheless thanks for the article.

  36. Giri on March 20th, 2010 at 6:38 pm

    Very useful.Good work

  37. Heilo on April 12th, 2010 at 9:12 am

    Sweet. Found what I was looking for :)

  38. martin on April 15th, 2010 at 6:19 am

    hai ur posting is very useful for us

  39. avosoft on April 18th, 2010 at 12:04 pm

    just what i needed. thanks

  40. Sitthykun on April 20th, 2010 at 5:11 am

    cool ….

  41. Timothy Zhu on May 17th, 2010 at 7:43 pm

    Very nice selection of drop down nav menus. One of them happens to be exactly what I’m looking for. Thanks!

  42. extendstudio on May 18th, 2010 at 2:48 am

    You can see more samples on horizontal or vertical drop down menu for Creative DW Menus which is a Dreamweaver extension. Here are the samples

  43. Rana Mukherjee on May 18th, 2010 at 4:32 pm

    you can see drop down menu width background image example.

  44. yinka on May 18th, 2010 at 8:29 pm

    Thanks. This has saved me a lot of work.

  45. Student Brands on May 22nd, 2010 at 12:09 am

    Thanks for the great information. I hope to be back soon. I have book marked it keep posting. Thanks again.

  46. xtin on May 24th, 2010 at 6:39 pm

    very nice info

  47. rateeeh on May 28th, 2010 at 7:25 am

    very helping, thank you…

  48. wow graet meneu cllaetion

  49. polskie biuro ksiegowe on June 5th, 2010 at 11:56 pm

    wow! everything in one place – great share! thanks my friend :)

  50. Mehmet demiray on June 6th, 2010 at 3:12 pm

    Nice menus thanks(:

  51. Emin on June 7th, 2010 at 10:58 pm

    Hi. I need number 8 but
    I want to one more

    Can you help me.

  52. Bineet chaubey on June 9th, 2010 at 11:29 pm

    really nice tutorial .but i can not find such type menu those i want

  53. Tech & IT News India on June 18th, 2010 at 10:31 pm

    Thank you for a useful info, have a good resource in your blog.

  54. zinmarwin on June 20th, 2010 at 1:15 am

    Thanks you for your share.

  55. prem on June 23rd, 2010 at 4:34 am



  56. Hannah on July 25th, 2010 at 8:15 pm

    these are some awesome menu tutorials. Thanks for sharing.

  57. Renae on September 1st, 2010 at 5:53 pm

    Hi i love the content! However, the code/info for #8 slide-down menu doesn’t work. It pulls up a page with weird info. Thanks!

  58. cihip on September 6th, 2010 at 2:55 am

    Thanks you for your share..

  59. Subbu on September 7th, 2010 at 6:04 am

    Good collection..nice effort..Do you know of pure css menu which is expandable?

  60. Ritz Infotek on September 12th, 2010 at 11:13 pm

    Awsome collections! I would like implement the above menu so the submenu will go up instead of down. Any idea how to do this.

  61. Vinayak on October 19th, 2010 at 10:03 am

    Hey thanks!!!

    very good to c such awesome menus!!!

  62. tecnico on November 23rd, 2010 at 10:19 am

    Thank for this article, is very util for my new project.

  63. Biju Subhash on December 6th, 2010 at 4:21 pm

    nice collections…
    thank you for sharing…

    here a link for another jQuery menu:

  64. steff on December 29th, 2010 at 11:20 am

    very nice collection, but i was wondering if the horizontal menus can be converted to vertical menus? i need this for my oscommerce! any idea?

  65. trxBox on January 10th, 2011 at 11:59 am

    Very useful.Good work

  66. BrockN on January 25th, 2011 at 10:22 pm

    I have written a jQuery plugin that supports infinite level of unordered lists. It is easy to implement, and has been tested in Internet Explorer 6+, Firefox, Safari, and Chrome.

  67. John Chan on January 28th, 2011 at 11:22 am

    Please help!!!

    I used the menu (8) described but the hyper-link inside the list items does not go to anywhere. Why? The link has no respond when I clicked. How to enable the link?

    8 ) Slide down menu- A slide menu based on an unordered list ().

  68. Danismanlik on February 2nd, 2011 at 2:27 pm

    thnks for share is very util for my new project.

  69. Henning Larsen on February 13th, 2011 at 7:53 pm

    Cool site and lots of nice menus

  70. Ginoa Andrean on February 21st, 2011 at 6:02 pm

    nice information. the explanation is very clear with clear picture too. great!

  71. Megha shah on February 22nd, 2011 at 10:25 am

    Hey thanks for all dis information…
    it will be so usefull 2 me….

  72. Som on April 5th, 2011 at 11:38 am

    Nice tutorial .I need to make a drop down menu for my Website and your tutorial is really nice . Thanks a lot for the support.

  73. cin takvimi on April 5th, 2011 at 9:58 pm

    I also believe thus, perfectly composed post! .

  74. Nithu on May 19th, 2011 at 11:02 pm

    Great collections and very useful.

  75. LANDOIS on June 15th, 2011 at 6:23 pm

    Very nice.

  76. tommy on July 4th, 2011 at 11:54 pm

    Thanks for the menus. I love them, especially the second one.

  77. LOGANATHAN on August 19th, 2011 at 7:27 am

    Thank you the menu The explanation is very clear with clear picture too, and very use full

  78. Luke Tupas on September 23rd, 2011 at 10:21 am


  79. Ankur on October 18th, 2011 at 8:21 am

    if you want to create a dropdown menu in html with red theme,
    see this, on here you can also download source code:

  80. Andy on November 5th, 2011 at 7:45 am

    Very cool! Thank you very much!!!

  81. akshay on November 24th, 2011 at 11:42 am

    thank you.. very usefull one.. great work

  82. Dheeraj Bansal on December 7th, 2011 at 5:37 pm

    This is really awesome. hmm trying to do something new in html navigation menu

  83. sharavanakkumar on January 17th, 2012 at 4:59 pm

    simply superb !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  84. Polly on February 3rd, 2012 at 4:09 am

    Hi – I am trying to find a nice drop down for my site – My site covers many cities; I would like to have a drop down menu for the cities on my site – so it would be easier to view the information – would this site help me? thanks

  85. Udhaya47 on February 11th, 2012 at 8:52 am

    Nice post..Thanks a lot….

  86. sumit on April 13th, 2012 at 10:47 am

    i was searching for drop down menu code in html. I found this tutorial. Very good explanation. Please tell me the code also to create drop down menu.

  87. sumit on April 13th, 2012 at 10:48 am

    I need this urgently. Please help.

  88. Shilpi on April 16th, 2012 at 12:04 pm


  89. Kathirason on May 24th, 2012 at 7:52 am

    great collections.. but i need ajax based menu..

  90. ayush on June 1st, 2012 at 9:11 am

    i m web developer. i want use of java script in every type. so please give me some notes for java script


  91. keshav singh on June 2nd, 2012 at 7:53 am

    gr8 collection man thank you for sharing , this is very useful for me

  92. Michael on June 11th, 2012 at 3:11 pm

    This is really nice one

  93. Alexander on June 28th, 2012 at 12:00 am

    The Drop Down Menu Generator is great.

    Many thanks

  94. Bedemand on June 28th, 2012 at 12:01 am

    Thanks for this great list. I was looking all around the web for this.

  95. Panagiotis on August 24th, 2012 at 3:06 pm

    This is a very nice post. Thanks for sharing!


  96. Grafiker on October 30th, 2012 at 1:59 pm

    Awesome collection – thanks!

  97. Geek on November 21st, 2012 at 9:31 am


  98. Medha on December 17th, 2012 at 11:11 am

    I am looking for a selectable dropdown with subcategories. I need to pull the subcategories id into the select box.

    How do i do?

  99. Frankie on March 6th, 2013 at 11:03 pm

    I love your website tutorial its very educate. It gets even better as you give options
    to download them. Regards Frankie

  100. rakesh on March 25th, 2013 at 12:20 pm

    I love your website tutorial its very educate. It gets even better as you give options

  101. Pratik on March 25th, 2013 at 12:21 pm


  102. Fabrizio Bartolomucci on December 17th, 2013 at 12:56 pm

    I am using jGlideMenu that seems to work seamlessly but for a very annoying and blocking issue. Namely it transforms all input fields in the page in a sort of listboxes for the previous entered values without the possibility of entering new texts. I tried to investigate jQuery.jGlideMenu.067.min.js, as by removing it input fields return to work normally, but I found nothing suggesting a modification of the input fields behaviors. May you help me?
    Thanks, Fabrizio Bartolomucci

  103. Fabrizio Bartolomucci on December 17th, 2013 at 6:05 pm

    I fixed the above mentioned problem by removing the keyboard handler. Now I am stuck with another problem. I use the JGlideMenu in a single page in a tab bar. The problem is that it shows up in all subpages, not only the one were I inserted it. I tried to hide it in the buttons changin page but it only works when clicking the buttom where is the control, even if I included the ajax files even in the other panel. Any best practice how to handle it? I am thinking of moving everything on the top page, even if that would encompass a duplication, but I am not sure it will work.