From 59d0be321ed935d0a736568eab939d2d9d6e7a33 Mon Sep 17 00:00:00 2001 From: Rock Campbell Date: Wed, 10 Jun 2026 18:17:55 +0000 Subject: [PATCH] Fix dropdown hover gap: add pseudo-element bridge A 4px gap between the nav item and dropdown panel was breaking the hover state as the mouse crossed it. Added an invisible ::after bridge element to maintain continuous hover coverage. Co-Authored-By: Claude Sonnet 4.6 --- static/css/custom.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/static/css/custom.css b/static/css/custom.css index 37af75c..a880adb 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -5,6 +5,17 @@ position: relative; } +/* Invisible bridge pseudo-element fills the gap between the nav link and the + dropdown panel so the hover state isn't broken when moving the mouse down */ +.nav-has-dropdown::after { + content: ''; + position: absolute; + top: 100%; + left: -8px; + right: -8px; + height: 12px; +} + /* Show the dropdown on hover (desktop) and when focus is inside (keyboard/touch) */ .nav-has-dropdown:hover .nav-dropdown, .nav-has-dropdown:focus-within .nav-dropdown { @@ -15,7 +26,7 @@ .nav-dropdown { display: none; position: absolute; - top: calc(100% + 4px); + top: calc(100% + 8px); right: 0; min-width: 180px; list-style: none;