Common CSS Navigation Menu Mistakes
Find out how to improve the UI of your navigation menus with a few lines of CSS.
Find out how to improve the UI of your navigation menus with a few lines of CSS.
Along the way, you’ll learn how to create a delayed closing effect for the dropdown menus with transition-behavior CSS property, how you can utilize the :has() pseudo-class to simplify your HTML, and more.
Chapters
- 00:00 Intro & setup
- 01:21 Mistake #1: Too small target areas
- 02:27 Mistake #2: Not using gap with flexbox
- 03:30 Mistake #3: Unforgiving target areas for dropdowns
- 05:06 Mistake #4: No delay before closing dropdowns
- 08:32 How to use :has() pseudo-class to add arrows on menu items with submenus
- 09:30 Mistake #5: Not animating anchor links
