Easy Multi-Level Dropdown Menu Tutorial - Using Only CSS (With Animated Dropdown Arrows)

Easy Multi-Level Dropdown Menu Tutorial - Using Only CSS

Easy to Use & Easy to Customize
Today I have a multi-level dropdown menu or nav tutorial for you. This is very easy to setup and also looks nice with animated arrows to show dropdown menus. You can easily adjust this to work with your own website. We will only be using html and css to make this menu. As I mention in the video I recommend you read about css selectors if you are wanting to improve your css knowledge. Because we use these selectors I am calling this an intermediate level tutorial, this however does not make it hard to do. Each dropdown follows the same style: A input and label (making the category) followed by a (ul) and each (li) is the options to choice from or page links. I hope this helps :D

Have a great day and don’t forget to Like,Share the video and Subscribe for NEW VIDEOS every Week!

Source Code:

CSS Selectors:

Previous Video:

My Links:

[nicolecmar]

Best multi-level menu tutorial I've seen yet! Thank you soooo much!

[MrFogyfog]

Best! Saved me tons of Js code, thanks!

[vladosononame]

This is cool tehniq, very clean and well organized

[dilek]

Thank you very much. This was exactly what I was searching for.

[OttoLeholt]

thanks a lot Edwards - this is just GREAT - best tutorial on the subject I have seen :-)

[babyprintz]

Watched another video of yours prior to this one, on responsive menu and this video is like the next level up. Really enjoying your tutorials. Thank you!!

[beru]

This was a beautiful dropdown menu, as a beginner thank you so much <3

[angiethatcatlady]

man I'm an effin designer taking my effin programing class, you saved my life, k bye.

[thomaseastlack]

Excellent presentation. Thank you very much.As a novice, I was able to successfully replicate your process.

[pianoLee-sxdx]

I am glad that I have found your channel! This looks great both in terms of design and functionality! If I have any questions, are you able to help me? for some reason, it seems to affect the height of my footer....

[robertmassotti]

Hi. Very nice menu tutorial. Best i have seen so far. How can i change the background color of the drop down sections of the submenus so that it is clearer.

[nikhilsoni]

how are you displaying those blue line for every div while working with padding ?

[aboq]

Es un buen video, la verdad te felicito, pero... la funcionalidad del menú al dar click en el subnivel más bajo (habiendo ajustado las #herf), no se desaparece el menú.... dando un error de funcionamiento.

[DavidAshby]

Hi, from this tutorial is there a way that you keep the control of open/close as you have it but the the navigation is open on load without using Javascript?

Great tutorial!

Thanks

[pragtigoswami]

If I want the menu to be displayed all time and only sub menu to be display on click how to do this????

[alisah]

I was wondering, if anyone knew where I could find a tutorial for a responsive menu (+submenu) that uses nav ul li (and so on) tags. For some reason its hard to find one. Using Wordpress so adding custom classes to menulinks is pain for someone like me who doesn't have that much of experiense!

[IhorT]

thanks from Ukraine! It helps me a lot

[pianoLee-sxdx]

I am also curious as to why you use position relative here as opposed to position absolute? Because it tends to push my other positions relative images down

[verdedenim]

This is very well done! Thank you ! I've read through the CSS L3 selectors and 'fancied this up a bit', but I'm not sure what the "hamburger menu item is for. I don't know why it's red, either. Could that effectively be 'hidden' or even removed?

[pianoLee-sxdx]

Hello! Is it possible to make this a position fixed? I tried it but then my scrollbar disappears...