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;