diff --git a/components/Navbar/NavbarSubMenu.module.css b/components/Navbar/NavbarSubMenu.module.css index 283db38..4091cc0 100644 --- a/components/Navbar/NavbarSubMenu.module.css +++ b/components/Navbar/NavbarSubMenu.module.css @@ -19,10 +19,10 @@ background-color: var(--nav-bg); } -.nav-submenu > li a:focus-visible { +/* .nav-submenu > li a:focus-visible { outline: 2px solid var(--nav-outline-color); outline-offset: 2px; -} +} */ .nav-submenu.open { max-height: var(--submenu-h); @@ -41,6 +41,27 @@ margin: 0 auto; } +.nav-submenu-list li a { + position: relative; +} + +.nav-submenu-list li a:focus-visible { + outline: none; + width: 100vw; +} + +.nav-submenu-list li a:focus-visible::after { + content: ""; + position: absolute; + top: 8px; + right: 8px; + bottom: 8px; + left: 8px; + border: 2px solid var(--nav-outline-color); + pointer-events: none; + box-sizing: border-box; +} + .nav-sub-toggle { display: flex; align-items: center; @@ -84,6 +105,9 @@ opacity 300ms, transform 300ms ease; } + .nav-submenu-list li a:focus-visible { + width: auto; + } .nav-submenu.open { opacity: 1;