diff --git a/styles/navigation/nav-main-default.css b/styles/navigation/nav-main-default.css index ba84354..ee7cc32 100644 --- a/styles/navigation/nav-main-default.css +++ b/styles/navigation/nav-main-default.css @@ -26,9 +26,14 @@ /* spacing & display */ @apply flex items-center px-4 -my-4 no-underline; height: calc(100% + 2rem); + } - /* interaction */ - &:hover { + /* Hover state: triggered by li so it persists when moving into the submenu. + Also triggered when a submenu is open (e.g. via keyboard/click). */ + &:hover, + &:has(.menu-vdi__toggle[aria-expanded="true"]) { + >a, + >.menu-vdi__toggle { @apply bg-cwc-blue-02 text-light; box-shadow: inset 0 -4px 0 #F26B53; } @@ -37,17 +42,18 @@ &.menu-vdi__item--contact { @apply h-auto; + /* Override the li:hover rule above — contact keeps its own button style */ + &:hover > a { + @apply bg-transparent; + box-shadow: none; + } + >a { @apply ml-2 mr-0 my-0; height: auto; background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%); border-radius: 1.25rem 0.25rem; padding: .5rem 2rem; - - &:hover { - box-shadow: none; - background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%); - } } } } @@ -63,11 +69,12 @@ .menu-vdi__submenu { top: calc(100% + 1rem); - @apply bg-cwc-blue-02 shadow-lg left-4 w-64 flex-col; + @apply bg-cwc-blue-02 shadow-lg left-0 w-64 flex-col rounded-b-lg ml-0; >li { @apply w-full border-b border-[#D24D32]; - &:last-child { @apply border-b-0; } + + &:last-child { @apply border-b-0 rounded-b-lg; } } .menu-vdi__item {