Top 5 CSS Navigation Menu Mistakes

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.

🔗 Links
Demo: https://codepen.io/ZoranJambor/pen/em...
Guide to :has() pseudo-class:    • In-Depth Guide to CSS Parent Selector :has()  

📖 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

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Help support my channel
☕️ Buy Me a Coffee: https://buymeacoffee.com/cssweekly
💖 Become a member on Patreon:   / cssweekly  
🪧 Buy CSS Stickers pack: https://stickers.css-weekly.com
👨‍🎓 Get a course: https://masteringlinting.com/

Keep up-to-date with CSS Weekly:
🦋 Bluesky: https://bsky.app/profile/cssweekly.com/
🐦 Twitter:   / @cssweekly  
🎶 TikTok:   / cssweekly  
🎇 Instagram:   / cssweekly  
📘 Facebook:   / cssweekly  

Keep up to date with what I'm up to:
👨‍💼 Blog: https://zoranjambor.com
💼 LinkedIn:   / zoranjambor  

Zoran Jambor
#css #csstutorial