crashlabs/huskies
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

fix: dropdown hover gap and z-index so menu is clickable on desktop and mobile

Browse Source 
Invisible bridge element fills the gap between toggle and menu so
hover chain doesn't break. Dropdown z-index raised above hero graphic
so links aren't obscured on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
dave
2026-04-13 11:42:11 +00:00
parent 5536803ad6
commit 8b5275a30b
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/style.css
+15 -4
View File
@@ -114,18 +114,27 @@ header nav a:hover { color: var(--text); opacity: 1; }
cursor: pointer; cursor: pointer;
} }
.nav-dropdown-menu { /* Invisible bridge between toggle and menu so hover doesn't break */
display: none; .nav-dropdown::after {
content: '';
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 0; right: 0;
margin-top: 0.5rem; width: 100%;
height: 0.5rem;
}
.nav-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem 0; padding: 0.5rem 0;
min-width: 140px; min-width: 140px;
z-index: 100; z-index: 200;
} }
.nav-dropdown-menu a { .nav-dropdown-menu a {
@@ -153,6 +162,8 @@ header nav a:hover { color: var(--text); opacity: 1; }
.hero-graphic { .hero-graphic {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
position: relative;
z-index: 1;
} }
.hero-husky { .hero-husky {