Using tabbing to expand mega menu - CSS only?

Issue

I have a "mega menu" that I would like to show on hover as well as when the user tabs into the parent element containing the secondary menu. The following seems to work if I force the :focus state, in developer tools, on the li containing the mega menu, but it doesn't seem to be focusing the li when I tab down from the text input. Is there a way to accomplish this without using JavaScript?

nav {
  background:#ccc;
  position:relative;
}
  nav > ul {
    display:flex;
    column-gap:1.5rem;
    width:100%;
    list-style:none;
    margin:0;
    padding:0;
  }
  nav li {
    padding:1.5rem;
  }
  nav li a {
    position:relative;
  }
  nav li.has-children > a:after {
    content:"";
    display:block;
    width:25px;
    height:25px;
    background-image:url('https://upload.wikimedia.org/wikipedia/commons/9/9a/Caret_down_font_awesome.svg');
    position:absolute;
    right:-30px;
    top:50%;
    transform:translateY(-50%);
  }
  
.mm-cont {
  display:none;
  position:absolute;
  width:100%;
  background:#aaa;
  bottom:-132px;
  left:0;
}
  .sub-menu {
    list-style:none;
    padding:0;
  }
  
  
/* Show mm-cont on hover and focus */
li.has-children:hover .mm-cont,
li.has-children:focus .mm-cont {
  display:flex;
}

<input type="text" placeholder="start here" tabindex="0" />
<nav>
  <ul>
    <li class="has-children" tabindex="1">
      <a href="#">Lorem</a>
      <!-- This should expand when tabbing into this li -->
      <div class="mm-cont">
        <ul class="sub-menu">
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
        <ul class="sub-menu">
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Sit</a></li>
        </ul>
      </div>
    </li>
    <li tabindex="2"><a href="#">Ipsum</a></li>
    <li tabindex="3"><a href="#">Dolor</a></li>
    <li tabindex="4"><a href="#">Sit</a></li>
  </ul>
</nav>

Solution

Consider using the :focus-within pseudo-class. As it sounds, it will match the case when an element inside is focused, such as the <a> elements.

nav {
  background: #ccc;
  position: relative;
}
nav > ul {
  display: flex;
  column-gap: 1.5rem;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  padding: 1.5rem;
}
nav li a {
  position: relative;
}
nav li.has-children > a:after {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9a/Caret_down_font_awesome.svg");
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.mm-cont {
  display: none;
  position: absolute;
  width: 100%;
  background: #aaa;
  bottom: -132px;
  left: 0;
}
.sub-menu {
  list-style: none;
  padding: 0;
}

/* Show mm-cont on hover and focus */
li.has-children:hover .mm-cont,
li.has-children:focus-within .mm-cont {
  display: flex;
}

<input type="text" placeholder="start here" tabindex="0" />
<nav>
  <ul>
    <li class="has-children" tabindex="1">
      <a href="#">Lorem</a>
      <!-- This should expand when tabbing into this li -->
      <div class="mm-cont">
        <ul class="sub-menu">
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
        <ul class="sub-menu">
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Sit</a></li>
        </ul>
      </div>
    </li>
    <li tabindex="2"><a href="#">Ipsum</a></li>
    <li tabindex="3"><a href="#">Dolor</a></li>
    <li tabindex="4"><a href="#">Sit</a></li>
  </ul>
</nav>

Answered By - Wongjn