Create a CSS only Mega Dropdown Menu

In this video I look at how to create a simple CSS only mega dropdown menu. These types of menus are all over the place, especially on ecommerce sites.

They look intimidating, but really it's not that complicated!

---

If you have your own channel, check out Chillhop for some awesome music.

[LAKD]

This might be old, but this is by far the best tutorial out there. You explain your steps wonderfully, I don't actually just type over I understand what you're doing! Many tutorials just tell you to type something, but never explain it, while you explain it in a very beginner-friendly manner. Great job, please never stop posting this quality!

[dankierson]

Having a secondary <ul> inside a list item of the primary <ul> will cause *double event execution* when you click on one of the secondary list item - unless the primary list item has no click event.
With nav menus the primary list item above a sub-menu usually does have a click event. For example the Services link in the main menu will usually bring users to an overview page for all services offered by a company.
The way round this crux is to *not* put the secondary <ul> inside a list item of the primary one - just have the secondary <ul> as a distinct element within the primary list.
Of course, you have to make only the first item of the secondary list visible until you hover on it and cause the rest of the sub-list to show. But this is readily possible in CSS.

[gabriel.valandro]

Hi, Kevin! You're such a nice guy with a soothing voice (which for me is an important thing while watching coding tutorials). Excellent, you've just got a new subscriber! 26-year-old brazilian front-end dev here!
Thank you!

[daveturnbull]

Having watched this I let out a shout of joy - exactly what I was looking for! This was followed by a groan as the link to the pen doesn't work 😒 However having stopped and thought for a minute I'm happy again - this means I have to actually create it myself instead of just copy pasting your code. That means i'm much more likely to actually learn it 😁

[muurio]

Not sure why you only have 37 subscribers, you definitely deserve tons more. Keep up the good work!!
Really loved your dry coding video to improve css workflow, would be cool to see more videos like that :)

[pankajgarg]

I was stuck on this for so long. and then I found your
literally your channel has solutions for all my CSS problems
Keep Going

[artistdiana]

Omg I watched so many videos to make a dropdown menu but I understand just yours !! Thanks Kevin !!

[sounds-of-world]

Man, you should also consider users who want to take advantage of your videos but don't understand English when spoken quickly :) Anyway, thanks a lot for valuable contents :)

[luismarrero]

thanks for all tutorial you shared with us. i am learning a lot but i always wonder why you use display block in the nav a part? sorry sounds stupid but i am zero html and css. thanks

[aaronedmiston]

Thank you Kevin! Saved my project at the last min.

[georgebelletty]

trying to figure this out for the last 8 hours mate... then I found your video! ta ;)

[atukundaonesmus]

I immediately signed in and subscribed after hearing you thank subscribers.
Thanks for the endeavors.

[ronpalmer]

Wow! Floats. This goes way back. I have a question about using em. You seem to default to em all the time. It is my understanding that it is safer to default to rem to avoid unintended nesting compound changes. What is your opinion on this?

[TheFallinforyou]

dude thanks for this. Keep up the tutorials! You have a talent for teaching it's so easy to follow along!

[janjgaval]

i have search some decent guides and this is best what i have found even its 6 years old

[Udaykumar-rtdi]

Hey Kevin, Its so good to see this qulaity content now, which was posted 5 years ago, Can you make a video on dropdown menu, but the list should appear on CLICK command, but not on hover.

[jasonpringle]

Hey, great tutorial. I know this is an older video but I tried the codepen link and it doesn't work. Do you have the code stored somewhere else that your able to share the link. Thanks!

[JimKernix]

You're the best! I set up my menu using flexbox because I need to use flex-wrap. My sub-menu is going to have a very long list of words for each letter of the alphabet. It's for my aunt who has cerebral palsy and I'm hoping she will be able to compose full emails more easily. I still have to work on adding the words she clicks on to a textarea but I do have one problem.

I am making the words look like buttons - big targets to click on given her motor control issues. I don't need a border but I wanted to see what it looks like. But the border is making my sub-menu items shift. I have box-sizing: border-box on the body and I tried adding that to the sub-menu thinking that the position: absolute messed that up but the shift is still happening. Any idea what the fix for that would be?

[johanstam]

Hi Kevin, I was wondering how to get a mega menu stretch full width of the screen when the parent navigation is boxed into a container?

[MeetPatel-kubk]

I want last Tab 04 right aligned so I add float: right for tab04 but I am not getting full with for dropdown menu, How can I get full width for right aligned tab?