Create a CSS only Mega Dropdown Menu 

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!

Having a secondary inside a list item of the primary 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 inside a list item of the primary one - just have the secondary 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.

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 :)

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!

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

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

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 :)

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 😁

It's a great video. 2 things I am trying to figure out for 24 hrs now is how to center the logo if needed and how to make it responsive. But the basics of creating dropdown menu are great

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

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

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

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

would love to have had an updated version of this without 'floats' 😇 and maybe a video with how to style this menu 😁. I'm finding it really hard to achieve this using display: flex; The sub-menu items do not breakaway from the parent container that has flex added on it even though I have added position: absolute on the submenu. Would love for a video on how to recreate this using flex. Thank you.

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.

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

Thank you really much Sir.Learned a lot from you. Always found your videos the best learning resource.

Thanks Kevin. You are really the stuff of RU-vid greatness. :)

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?

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

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?

Hi, Kevin. Just a heads up, for some reason, the Codepen link is dead. I know this video is years old, but I just thought I'd point that out.

Thank you so much for this one been looking for this one so long

Great videos and tutorials Kevin. Thanks!

Ooh I didn't see this video until now, thanks.

404 I'm afraid you've found a page that doesn't exist on CodePen. That can happen when you follow a link to something that has since been deleted. Or the link was incorrect to begin with. Sorry about that. We've logged the error for review, in case it's our fault.

Loved it, would you make a video on how to make this responsive?

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!

Ohh my my.. look at that! ❤

Great explanation

Thanks for this awesome tutorial

Love this.. but i want a link that work, so i can look at the code😢

Thanks a lot for this old is gold kinda stuff, Really appreciated

As always good video. Thank you for all those videos, i have learned alot from them . Kevin can you do another one like this but in a vertical menu?

How can i get the menu dropdown to fit window width

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?

I don't know where the typo came from. I hope there's a link to see what you've just entered. ㅠㅠ 제발

thank kevin, subscribed .

Do you have a tutorial on making this exact mega menu responsive/mobile?

Excellent video, thanks!

Excellent Video! Thanks a lot!

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?

Awesome.Menu-col-2/4 classes weren't defined in the html though.

Terrific

Is it responsive.if not where should i get it?

Thank u so much, you just help me a lot, it was my dream to code that menu. But i have a doubt, and if somebody answer i'd be happy. Is there a way that on .menu-sub we apply disply:flex and so flex attributes inside it, to avoid float: left; Thank you!

is there a link to a demo version

hi friend! thanks a lot for the tutorial! is any way to make responsive this? i really need it! thanks again!

Hi, Kevin. I enjoyed learning from you the design of this Mega Menu. It really is awesome. Thanks for it all. But I wondered whether we could use it in a responsive setting and make it suitable for mobile. Could you build that on this mega menu, please? Cheers Adolf

Mega menus (or how to scare some users). This is not a criticism, hein? I'm excited about the idea of creating one of these monsters, indeed.

Where should we use transition so that the sub-menu display smoothly...it's blinking ..

sir, can you make any same video tutorial with icon, when mega active it's icon show up, and when not active it's icon show down?

Can this be used in squarespace?

Thanks for the video. I was just wondering if this no-JS approach would work with mobile devices as I can see you have used the ":hover" function? I don't have the facility to test this myself at the moment. I have a feeling that the only way is JS to be compatible with mobile and desktop?

Hey Kevin! Why do u use an extra instead of using the underneath with the class of menu-sub? Thanks for your video's.

Hi Kevin! Just a quick question, are you familiar with a Shopify coding? :) I'd love to create that kind of menu on my website, but that HTML/CSS there is so tricky...

Hi Kevin, if I want to create a desktop first application then should I start from using @media(max-width) or use @media(min-width)? Please give me some advice/tips

Great tutorial. How are you getting your browser to auto refresh?

its nice .........thank for this

Hey ..Sir I am trying this with the same code but I am not able to go inside the submenu..I mean it disappear when I try to go inside the submenu..Please help.

Hi! I don't know much about coding, just enough HTML and CSS that I use to update things here and there on a template we have for an e-commerce website. I followed your instructions here and the code on codepen and after a little tweaking I got it to work on my site (it's still unpublished so I can't give you a link). Couple of questions in case you can help: I am a little worried after reading some of the comments regarding being responsive for mobile but I tested it and it seems ok, the only thing is the spacing at the end of the navigation bar after the last tab is more when I open it on my cell phone. And the biggest question: how can I delay the dropdown in this code? I read about transition-delay but I can't figure out where to put it in this code to make it work or if it needs anything else besides that style. Right now if I'm just moving the mouse to go from the top navigation to a product that's below the mega menu, it starts opening so quickly. Thank you in advance for any help you can send my way and thank you for the great information!

Thanks kev

Thanks, but for Wordpress i using groovy menu plugin, save a lot of time

awesome! question? have you ever done a transparent navigation bar, sitting over a slider?

Just.....WoW.....!!

If you were to redo this video in 2018, would you use flexbox for the menu?

my blog is very simple to show Mega menu Can u Help me Please

Hey if you don't mind can you please explain how the positioning relative ul and absolute positioned ul works in this situation. I mean i just don't get how the absolutely positioned ul can appear under? Sorry but thanks if you do answer!!

the link is broken

good

Hey hey! Help me please! My dropdown is stacken and slices my sentences in twice! (And its only horizontale and not in de width! help me please!)

Hi! Kevin Powell thank you very for your superb tutorial. thanks again I am from Bangladesh, I watch and download all your video and try to apply on my blog. but Sir is it possible to add code or search bar code in this mega drop-down menu bar. if it is possible then make another video, please

thank you for this love it, and can you make it responsive

Please tell me how can I make it responsive????

the codepen link is broken. Did it get deleted?

Tell me how to add a picture in dropdown menu

can u tell me how to add a nav bar in this code

I like your videos but the only thing that i dislike when watching your videos is that you don't zoom. Please try to be zooming your codes so that your codes becomes a little bigger so that your viewers won't have problem when watching your video tutorials.

How to This look add For my Blogger

video is so complex like Rocket science

smash that like button

Hey! Thanks a ton for making these videos, they really help me every day at work! Quick question though... I'm using clickfunnels to put this code into and when I put the exact code you start with into a custom html block absolutely nothing is coming up.... But when I try it in the Tryit Editor v3.5, It shows up just fine. Here's my code: @import url('fonts.googleapis.com/css?family=Roboto:400,700'); * { box-sizing: border-box; } body { background: #ddd; margin: 0; font-family: 'Roboto', sans-serif; } .container { max-width: 1000px; margin: 0 auto; } nav { background: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,.10) } nav ul { margin: 0; padding: 0; list-style: none; position: relative; text-align:right; } nav li { display: inline-block; } nav a { color: #444; text-decoration: none; display: block; padding: .75em 1.75em; } nav li:hover { background: #444; } nav a:hover { background:#444 } nav li:hover a { color: #444; } Building a Mega Menu HOME SERVICES BLOG ABOUT CONTACT Any thoughts or advice would be SOOOO helpful.

is this reponsive?

Hi Kevin, Which tool did you used for live update code?

How to make this menu responsive, using javascript accordin feature. Please send me zip file.

hello

Sir, can you please send me this video documentation.

please upload the full online shopping website with database, without WordPress,I want project in HTML CSS SQL PHP BOOTSTRAP JavaScript ,please me the zip file with database in Hindi reply me as soon as possible thank you please upload the video in slowly in step by step, I m waiting ur repsonce, thank you?

is this mega menu responsive? i did make mega menu but i have difficulty to make my mega menu stay in place while in medium size screen