Multi Level Navigation Menu With HTML & CSS Only | Responsive Dropdown Navbar Menu

Make a Multi Level Navigation Menu With HTML & CSS Only. This responsive menu has accessibility features and functions as a dropdown navbar. You will also learn one must-have mega menu feature that is all too often overlooked.

(0:00) Intro
(0:33) Menu Features and a Discussion on Absolute and Relative Positioning
(2:34) Building the HTML Lists
(13:55) Applying CSS Styles
(28:38) Applying a Media Query for larger screens
(31:32) An All Too Often Overlooked Menu Feature that is a MUST
(35:27) Testing the Menu for ScreenReader Accessibility

✅ Follow Me:

Was this tutorial about making a Multi-Level Navigation Menu with HTML & CSS helpful? If so, please share. Let me know your thoughts in the comments.

#multi #level #menu

[bozidarbralic]

Extremely valuable stuff from Dave, as per usual.
Keep up the good work.
Ton of respect from Croatia :-)

[ahmad-murery]

Hello Dave,
What a great tutorial, it will help a lot reducing the time needed to build a flexible menu,

I downloaded the source code and for some reasons the A tags for both Alan and Alex are closed twice (one before the name and one after it)

Not sure if it worth it but anyways,
when hovering over an anchor tag (i.e. Adam) it jumps a little bit because of increasing the font size to 120%, using transform: scale(1.2) instead can solve that,
also setting subMenu width to a fixed value of 120px will cause the name inside the A tags exceeds its parent width if a longer name is used, so setting the 120px as min-width instead may fix it.

Finally one can add Ahmad too to A menu 😎

[SullivanAttorneys]

Hi Dave,
This works perfectly on my desktop browser, but there is a problem when using on my iPhone. Tapping off the menu or re-tapping the hamburger doesn't hide the menu--the only way to do so is to reload the page. Is there a way to fix this?

[nwweulp]

Hi Dave, great content as always. I think it’s just because that I’m a beginner, but I keep getting lost on where I am. I understand the css languages used, but keep getting lost on why you’re using all those style attributes. Will be nice if you sometimes summarize the big picture on your way.

Just a suggestion and probably due to my lack of knowledge lol. Don’t mind it much. I’m going through the code with more time. Thanks again for the content!

[ma-ezzh]

Thanks again Dave! I have a somewhat unrelated question. If you use react, what is your preferred method for styling? I have run into the styled-components library and I think I would like to go with that. I have run into CSS modules as a possibility but I don’t really understand the concept too well. Styled components makes more sense to me and I like that it is in the same file as the component. But just wanted to know a professional dev’s thoughts.