Uploaded March 2025 | Updated September 2026, 47 minutes ago

---

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: codepen.io/ZoranJambor/pen/emYeZXv
Blog post: blog.css-weekly.com/top-5-css-navigation-menu-mistakes
Guide to :has() pseudo-class: youtu.be/OqLquBs-bEg

📖 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:
💌 css-weekly.com

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

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

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

- Zoran Jambor
#css #csstutorial