Creating a CSS3 Dropdown Menu – Video Tutorial


We have talked a lot about about HTML5 and CSS3 in the past couple of months and today we continue the series of video tutorials with a new addition: creating a CSS3 dropdown menu from scratch. It is extremely easy to do, so don’t be scared.

The video is a bit longer, it runs for about 40 minutes, this is because I have gone into great detail explaining the process so that everyone will understand all of the properties. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.

We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.

The CSS3 Dropdown Menu We’ll be Making

create css3 dropdown menu

As promised, you can check out my previous video tutorial about how to create a responsive website using HTML5 and CSS3. In this tutorial you will learn how to create a website from scratch, and by the end you will have a functional website to boast of. It can also be your way to becoming a freelance web designer and live your dream lifestyle, just like what we do.

Question: How Can You Make this Responsive?

There are different ways on how you can include navigation for mobile devices, but not every one of them work for the users. Some prefer to make their navigation menu responsive by collapsing them under one icon, while others would just line it up evenly (just like 1WD!). How about you? What’s your best bet?

20% exclusive discount on Bluehost – for your hosting needs, because you’re on your way to becoming a successful web designer – and you need this!



  1. Tom Ireland

    Hi, Christian.

    Once again, great tutorial. I’ll be implementing this on a MODX website that I’m developing. Cheers! Looking forward to the HTML5 contact form tutorial!



  2. Hey,

    After your previous post I have worked the wonders of making my site responsive, big props! It’s ridiculous how much traffic im retaining shown through my bounce rate going down 20%, ridiculous! Anyway as you say there is no css3 for mobiles I’m not going to convert my java dropdowns into this just yet, are you able to let me know when or if there will ever be this function as I am trying hard on reducing my load time on the site :)

  3. Shery-Ann

    Hi Chritian
    I incorporate the menu in the html & css3 file document we creaed, added some box shadows and it looks great?
    Great work!!

  4. Love it. Makes me feel like I wish we didn’t still teach JS drop down menus at university… Lol, the comment being too short error came up.. I just wanted to point out I’d much rather use CSS3 than JS! :)

  5. I’m confused about what you said in the text of this post…
    “However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.”

    Does this mean that this menu is not going to work in newer IE and mobile browsers? I’m almost at the point where I don’t much care about IE compatibility (only because most of my audience has already ditched it) but I am worried that it works in mobile browsers.

    • Christian

      Hi Craig, thanks for your comment. Unfortunately it isn’t possible to have dropdown on mobile simply because there is no “mouse hover” feature. Whenever you touch something on a mobile screen, your touch is interpreted as a click. So there is no hover option per se, but in one of my next tutorials I will teach you how to make “dropdown sections” on mobile, so keep following us!

  6. Great tut Christian! I definitely will be attempting this. By chance could you do a tutorial on creating a menu like this one: but only using CSS/HTML and no jquery or javascipt?

    Specifically the multiple columns with the rounded corners and the imagery and possible videos embedded in the menu like shown in the example. A tutorial or video tutorial would be great and highly appreciated.

    Thanks for providing awesome and quality tutorials and tricks on your site!