Any site starts with its navigation. Considering the fact that content nowadays is waaay more complex than it was in the past – building a one level navigation menu is not enough in pretty much all cases. There are many examples of multi-level dropdown menus built with JavaScript. Using JS for this purpose is of course widely accepted practice. However, as for me, when we have an opportunity to avoid using extra JS code on our beautiful sites, we have to grab and use this opportunity for the next 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.