rockcampbell/rockcampbell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix dropdown hover gap: add pseudo-element bridge

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Rock Campbell 2026-06-10 18:17:55 +00:00
parent 9b37504988
commit 59d0be321e
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/css/custom.css
View file

@ -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;