实现巨型菜单（Mega Menu）获焦可见，而非仅Hover触发

我需要让网站的巨型菜单（Mega Menu）在获取焦点时也能显示，而不只是通过鼠标悬停触发。

相关HTML结构 #

<ul id="menu-main-2022" class="nav-menu dl-menu submenu-icon styled">
    <li id="menu-item-31816" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-parent menu-item-31816 megamenu-template-enable megamenu-first-element mobile-clickable menu-item-current" data-template="32343">
        <a href="https://deltadentalcofoundation.org/about-us/">About Us<i class="default"></i></a><span class="menu-item-parent-toggle"></span>
        <div class="megamenu-template template-width-fullwidth template-framing-border megamenu-template-item-inited megamenu-template-inited"> 

原悬停触发的CSS代码 #

.thegem-te-menu__default.desktop-view ul.nav-menu > li:hover > .megamenu-template {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
    transform: translateY(0);
}

尝试过的无效选择器 #

我知道li元素无法获取焦点，所以尝试通过聚焦内部a标签，利用相邻选择器让div.megamenu-template显示，但以下所有选择器均无效：

.thegem-te-menu__default.desktop-view ul.nav-menu > li > a:focus + .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li > a:focus-visible + .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li > a:focus-within + .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li:focus-within > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li:hover > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li:focus-within > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li > .megamenu-template:hover,
.thegem-te-menu__default.desktop-view ul.nav-menu > li:focus-visible > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li:focus-within > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li > .megamenu-template:focus-visible,
ul.nav-menu > li:focus-visible > .megamenu-template,
ul.nav-menu > li:focus-within > .megamenu-template,
ul.nav-menu > li > .megamenu-template:focus-visible,
.thegem-te-menu__default.desktop-view ul.nav-menu > a:focus > .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > a:focus-visible > .megamenu-template {
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear !important;
    transform: translateY(0) !important;
}

解决思路 #

1. 修正选择器的结构匹配问题 #

看HTML结构，a标签的紧接兄弟元素是<span class="menu-item-parent-toggle"></span>，而非.megamenu-template，所以之前用的相邻选择器+无法选中目标元素。改用后续兄弟选择器~，它能匹配同一父元素下a标签之后的所有.megamenu-template：

.thegem-te-menu__default.desktop-view ul.nav-menu > li > a:focus ~ .megamenu-template,
.thegem-te-menu__default.desktop-view ul.nav-menu > li > a:focus-visible ~ .megamenu-template {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
    transform: translateY(0);
}

2. 利用:focus-within实现父元素状态触发 #

:focus-within会在父元素的任意子元素获取焦点时触发父元素的状态，li虽然不能直接聚焦，但可以通过这个伪类实现需求，这是最可靠的方案：

.thegem-te-menu__default.desktop-view ul.nav-menu > li:focus-within > .megamenu-template {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
    transform: translateY(0);
}

3. 确保菜单在内部导航时保持可见 #

当用户用键盘在巨型菜单内部的链接间导航时，需要保持菜单不消失，给.megamenu-template加上:focus-within状态：

.thegem-te-menu__default.desktop-view ul.nav-menu > li > .megamenu-template:focus-within {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

4. 优先级调试 #

如果样式仍不生效，检查是否被原有样式覆盖。可以给属性加上!important（仅在必要时使用），或者提升选择器的特异性（比如增加父类选择器）。

内容的提问来源于stack exchange，提问作者jinha