Before few years, Javascript was used to display Hover Dropdowns for Menu. But now, CSS3 has made it possible easily without javascript knowledge.

There are some facts you need to know before starting…

CSS Dropdowns are more elegant and faster and Javascript Dropdowns

CSS dropdowns nearly take user’s 0.6s to appear on the screen while javascript takes no time to load the box but takes time to load inner contents. (approx.1s)

1 second and .6 second are kinda much for users; though they are weak numbers!

CSS Dropdowns can be more decorative in less time

CSS is a script which is light and works fast and can be coded fast. Javascripts can be designed greatly, but takes time as you have to define every function. CSS dropdowns look adorable of they are provided with Hover Effects and Fade Effects with animation and transition.

Let’s start…

There’s nothing to know much about this, just see the Demo and Download the Source to Study!

Pure CSS Dropdown

To learn, you have to download this…
View Demo | Download Source

The only work remaining is to open up the files and study the markup code given.(Sorry for inconvenience, we aren’t able to show you markup in post right now to teach you in a better way. Thanks for considering.)

If you liked it, comment below and do express your thoughts on this! Stay tuned…


Posted by Kumar Abhirup

Hey guys, Welcome to this fascinating blog IQubex. I'm Kumar Abhirup, a blogger, web designer and a developer from Nasik, the Wine Capital of India! I started IQubex as a hobby and my vision is to make my readers happy and satisfied by answering all their questions on this blog. My age is 13 and I started my developing journey at the age of 10.


  1. Hey Kumar! Thanks for the tutorial. Can I please use this on my website as it is?


    1. Yeah! You can… No license is needed for that!


  2. Hey Thanks Kumar… U made it easy to understand 🙂


Don't miss a chance of commenting!