There are many examples of dropdown menus written with JS which of course is a great solution. However, as for me, when we have an opportunity to avoid using extra JS code on our beautiful sites, we have to use this opportunity for several reasons:

  • extra JS could overload the DOM
  • JS could overload users RAM
  • JS affects overall perfomance

So if we could create a dropdown menu without help of JS why don’t we try it?

Here is what I’ve got:

This is 3-level-deep dropdown menu on pure css. It has all the features of normal menu and works with no JS.

Source code

HTML

CSS

This menu in theory could have as many levels as we need, however the deeper it gets the scarier CSS we have.

In case you would like to download it, here is the link: download.

Thank you for your attention and have a good one.