Grow your CSS skills. Land your dream job.

Simple jQuery Dropdowns

Published by Chris Coyier

There are lots of dropdown menus already out there. I'm not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:

  • Cross-browser compatible (even IE 6)
  • Multi-level and retains "trail"
  • Very minimal styling (easy to adapt)
  • Very minimal JavaScript (short bit of jQuery)

 

View DemoDownload Files

 

I think it worked out pretty well. All my testing shows them working pretty well. Please let me know if you find any problems and we can try to address them. There was only really one CSS tweak needed for IE, which was to use inline-block on the submenu list items to prevent the weird spacing pseduo-line-break IE likes to do.

Each "level" is clearly marked in the CSS file, so it should be pretty easy to identify what is what and apply your own custom styling.

hoverIntent

The demo and download comes with two "versions", one with hoverIntent and one without. I couldn't decide which one I liked better so I just left both in. On one hand, hoverIntent is nice because it prevents the menus from opening if you just quickly mouse over them (like the mouse just happened to cross them but you clearly weren't intending to use the menu at that time). On the other hand, it makes the menu feel a bit sluggish.

Comments

  1. William Hernandez
    Permalink to comment#

    Very cool Chris.
    With this type of jQuery menus, do we have to worry if the user has javascript turned off? If they do, then what?

  2. Neil Hyde
    Permalink to comment#

    Works great Chris – thanks for the info!

  3. I think I am going to vote for the one without hoverIntent. The sluggish feel just detracts from the menu, IMHO. I guess it depends on users mouse moving speeds though! Thanks, I will probably be using this in the future

  4. Matt
    Permalink to comment#

    Nice work, i know this is a “simple” dropdown menu, but my only point to consider is:

    Some menu items go 3 levels deep e.g.: “Game-practice Equiptment >> Soccer >> Soccer Goals”. This is conveniently in the middle of the screen. However – if the the LAST <li> item (books-videos) goes 3 levels deep the menu expand left off the screen and causes horizontal scrolling :( (yes even at 1024×768)

    Im not sure how you difficult it would be to make the dropdowns expand out to the left (instead of the right) if them menu will go cuase horizontal scrolling?

    • Wouldn’t left expanding menus be the opposite of what the user would expect when using them? I know it would bother me because it would feel like reading right to left (or the opposite for languages that do read right to left ;-) ).

      Couldn’t you just leave that last section of the menu non-nested or better yet, not have the main menu go over that far to the right? I noticed this functionality as well when changing the browser window size on my Mac while testing this code…but everything has limitations.

      Cool menu Chris! Have you written any WordPress plug-ins that use jQuery yet?

  5. Permalink to comment#

    Thanks!

    Just what I needed, but if you had published before would I’ve saved many hours xD

  6. Permalink to comment#

    Thank you, thank you, thank you! This is great! The code is so much simpler than many of the others out there.

  7. Lee Smith
    Permalink to comment#

    Superfish rocks!

  8. Raya
    Permalink to comment#

    Good work.
    I was looking for such solution a month ago and its crazy but true that you can’t find a simple dropdown indeed.

  9. dmathews
    Permalink to comment#

    Excellent work! thanks for sharing.

  10. Permalink to comment#

    Nice work, beautifully crafted : )

  11. Jur
    Permalink to comment#

    I think Suckerfish is the leading standard concerning dropdown UL menu’s. But you just perfected it bij adding childs of childs.

    (is it childs or children in css? :p )

  12. I got a horizontal scroll bar in IE6

  13. Chris, this like everything else I have seen from you is excellent. Also want to say thank you for the Podcasts, superb content to learn from.

  14. Permalink to comment#

    Wow 65kb of unnecessary JavaScript when this can easily be accomplished with css http://www.cssplay.co.uk/menus/dd_valid.html

    • Permalink to comment#

      You claim to be CSS only yet it appears you have to use XHTML. What is the logical difference between using XHTML or jQuery to support CSS? This menu is elegant in its simplicity. But the author here has manners and does not ‘mark’ on your web sight.

    • Permalink to comment#

      You have got to be kidding me right? How else would you propose you do a website, or drop down menu, without xhtml? Saying something is using css only doesn’t literally mean it is just css, xhtml is the base structure of any website. The fact that you don’t see the benefit of using a pure css solution over the inclusion of 65kb of bloated javascript scares me and makes me think you have no idea what you are talking about.

  15. Permalink to comment#

    Chris, You are the best!

  16. Permalink to comment#

    I like it, nice job, but personally I am getting tired of drop-down menus. I prefer a nice big footer holding all this “extra” content. There are NO browser/accessibility issues and it looks more modern. Do you (or anyone) agree?

  17. Sarah
    Permalink to comment#

    I’ve been working on something very similar, but noticed that there are some issues with jQuery hover() and Firefox (both 2 and 3) where if you hover over the menu and it covers text fields or text areas, and then exit the menu on one of these elements, the menu doesn’t go away. It sticks around.

    Little video: http://screencast.com/t/TH2D2cdx81
    Ticket for jQuery: http://dev.jquery.com/ticket/3730

    I found that to get around it, I basically wrote extra css to use the :hover psuedo class for these objects and then had to update my js to do some browser sniffing. I don’t like that option, but we use a lot of form elements and it’s really annoying when the menus don’t go away!

    I see the same issue with your code when I download it and add some text fields below it.

  18. Permalink to comment#

    drop down menus are ok on some sites but i dont think they suit all…

  19. mayo
    Permalink to comment#

    very nice, thank you !!

  20. Permalink to comment#

    Great post, Chris, thank you. Your tutorials are invaluable for those of us who are still learning.

  21. It can be done with pure CSS.

  22. kirie
    Permalink to comment#

    I always hate drop down menu on website, but nice tutorial thx :)

  23. A new surprise every day…
    Thanks Chris…

  24. Too bad it lacks some basic accessibility (like using tab key to navigate in sub menus), but it’s a great menu, easy to setup for any website.

  25. Hi Chris,

    Cannot say I agree with the article presented.
    This is CSS-Tricks not jQuery overrides.
    Let’s face it there are better CSS only drop-down methods, albeit less simple and JavaScript is required to get IEv6 to fully comply.

    From an accessibility perspective the article should add a proviso that all root navigation links reference a page where the extended (dropdown) links are listed in full without a JavaScript requirement.

    I’ll forgive you if you provide the CSS only version too.

  26. Angela
    Permalink to comment#

    I’m glad you wrote a post like this..there’s a lot of dropdown samples out there but not all of them are good. Eventhough this one has some issues I think with the bug fixing it will be perfect soon.I’m gonna test it right now :)

  27. Eric
    Permalink to comment#

    For the extra line breaks in IE6, this can be fixed by removing whitespace in your markup.

    For example,

    <li></li>
    <li></li>

    can be written as

    <li></li
    ><li></li
    >

    and it will remove the line break. It looks funny, but it’s valid and works.

  28. Libby
    Permalink to comment#

    Really useful, thanks very much!

  29. jQuery helps a lot when you have to do some amazing stuffs with our sites…

  30. ys
    Permalink to comment#

    hey!

    I have a problem with my ul menu level2 appearing UNDER MY content.

    a screenshot: http://i43.tinypic.com/23sg4zk.gif

    how do i solve that?

  31. This menu it’s fantastic

  32. glenn
    Permalink to comment#

    I’m experiencing some weirdness, perhaps someone has an answer to. Using this menu, the sub-menu appears over a flash .swf. It’s not a problem with transparency, as I’ve already set the wmode to transparent. But when viewing the menu on a mac (only) in Safari v.3 and 4, and FF v.4 the menu acts very strange, with parts disappearing on rollover and such. No problems with browsers on a PC.

    Here’s the link, any ideas?

    http://geigercomputers.com/pm/projects/pbgroup/wood-pivot-window.html

  33. that’s very elegant solution yet simplify the CSS. Well done and thank you Chris.

  34. Matthijs Groen
    Permalink to comment#

    Thanks for the nice menu’s! I use jQuery in all my projects, so this source is really nice to know! Thanks!

  35. Michael
    Permalink to comment#

    I’m stuck at the library…viewing your new design in ie6 and it still looks great…nice work.

  36. Melanie
    Permalink to comment#

    hi chris thank for your aticle. I need your help. I would like use my sub menu width background at 100%; but i’dont want overflow page-wrap:800px;

    http://www.surplus-inventaire.com/mel/SimplejQueryDropdowns/index-hoverIntent.html

    I need my sub menu 100% but inside width in border blue.

    sorry form my english

  37. Hi!

    This is absolutely great, and it will work well on a new website that I am designing.

    However, I do have a problem that is REALLY frustrating me!

    Can you tell me how to put the dropdown menu into a table, and how to get it to center in the page? Everytime I put it underneath an image that is in a table, and that is centered, the dropdown menu moves all the page to left. I am presuming it is something in the CSS that I need to change…but what?

    Any help would be grateful.

    Thank you!

  38. Kemm
    Permalink to comment#

    Cool job on making this. Too bad you didn’t bother to include a readme or properly comment your code out.

  39. aheendra
    Permalink to comment#

    Its really a great work.I’m using it in my application.The only problem I faced was,if I keep the position:relative according to my convenience,then dropdown items hide behind data section & sidebar.And if I keep its position:absolute then I face placing problem(menu) as all my other elements are relative.

    Is there any solution for this?do let me know!
    Thank you for your help.

  40. Deron

    It appears your demo works with javascript disabled but when I’m using it on a local test site and disable javascript, it doesn’t work. What could I be doing wrong?

  41. Permalink to comment#

    Same here with Firefox

  42. Permalink to comment#

    Haha, nice reply. Agree.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".