title: Make Mega menu visible on focus, not just hover
body: <p>I'm trying to make a mega menu visible on focus, not just hover. Not sure what I'm doing wrong - it's at <a href="https://deltadentalcofoundation.org/" rel="nofollow noreferrer">https://deltadentalcofoundation.org/</a> Here's the HTML:</p>
  <pre><code>&lt;ul id=&quot;menu-main-2022&quot; class=&quot;nav-menu dl-menu submenu-icon styled&quot;&gt;
      &lt;li id=&quot;menu-item-31816&quot; class=&quot;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&quot; data-template=&quot;32343&quot;&gt;
          &lt;a href=&quot;https://deltadentalcofoundation.org/about-us/&quot;&gt;About Us&lt;i class=&quot;default&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;span class=&quot;menu-item-parent-toggle&quot;&gt;&lt;/span&gt;
          &lt;div class=&quot;megamenu-template template-width-fullwidth template-framing-border megamenu-template-item-inited megamenu-template-inited&quot;&gt; 
  </code></pre>
  <p>The CSS to make div.megamenu-template visible on hover is as follows:</p>
  <pre><code>.thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:hover &gt; .megamenu-template {
      visibility: visible;
      opacity: 1;
      transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
      transform: translateY(0);
  }
  </code></pre>
  <p>From what I understand, I can't focus on the li, so I've been trying to focus on the a nested inside the li, and then using the adjacent selector to make the div.megamenu-template visible. I've tried all the below, but can't make it work... any ideas?</p>
  <pre><code>.thegem-te-menu__default.desktop-view ul.nav-menu &gt; li &gt; a:focus + .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li &gt; a:focus-visible + .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li &gt; a:focus-within + .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:focus-within &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:hover &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:focus-within &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li &gt; .megamenu-template:hover,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:focus-visible &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li:focus-within &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; li &gt; .megamenu-template:focus-visible,
  ul.nav-menu &gt; li:focus-visible &gt; .megamenu-template,
  ul.nav-menu &gt; li:focus-within &gt; .megamenu-template,
  ul.nav-menu &gt; li &gt; .megamenu-template:focus-visible,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; a:focus &gt; .megamenu-template,
  .thegem-te-menu__default.desktop-view ul.nav-menu &gt; a:focus-visible &gt; .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;
  }
  </code></pre>