在键盘上按Tab时展开子菜单

Question

我有一个超级菜单，我想使其进入。当用户在菜单中切换时，我希望大型菜单能够扩展。

当您浏览菜单时，我可以看到它实际上集中在子菜单项上，但大型菜单没有打开。

有人可以帮我吗？

当子项目集中时，我该怎么做才能使大型菜单展开？

/*-- base styles --*/

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  font-size: 16px;
  font-weight: normal;
  padding: 0;
  margin: 0;
  max-width: 100%;
  font-family: arial;
  &.mobile-menu-active {
    overflow: hidden;
    position: fixed;
  }
}

a {
  color: inherit;
}


/*-- header styles --*/

header {
  width: 100%;
  background: #3e6fcb;
}


/*-- mega menu --*/

.mega-menu {
  background: white;
  border-bottom: 4px solid #3e6fcb;
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
}


/*-- menu styles --*/

ul {
  max-width: 1170px;
  width: 100%;
  margin: 0 auto;
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

ul li {
  color: white;
  a {
    padding: 2rem;
    display: block;
    &:hover {
      +.mega-menu {
        height: auto;
      }
    }
  }
}

ul li ul li {
  font-weight: bold;
  color: black;
}

ul ul {
  display: flex;
  justify-content: flex-start;
}

ul ul ul {
  display: block;
}

ul li ul li ul li {
  font-weight: normal;
  color: black;
}

<header>
  <ul>
    <li>
      <a href="">1. Level 1</a>
      <div class="mega-menu">
        <ul>
          <li>
            <a href="">1. Level 2</a>
            <ul>
              <li>
                <a href="">1. Level 3</a>
              </li>
              <li>
                <a href="">1. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">1. Level 2</a>
            <ul>
              <li>
                <a href="">1. Level 3</a>
              </li>
              <li>
                <a href="">1. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </li>
    <li>
      <a href="">2. Level 1</a>
      <div class="mega-menu">

        <ul>
          <li>
            <a href="">2. Level 2</a>
            <ul>
              <li>
                <a href="">2. Level 3</a>
              </li>
              <li>
                <a href="">2. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">2. Level 2</a>
            <ul>
              <li>
                <a href="">2. Level 3</a>
              </li>
              <li>
                <a href="">2. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="">3. Level 1</a>
      <div class="mega-menu">

        <ul>
          <li>
            <a href="">3. Level 2</a>
            <ul>
              <li>
                <a href="">3. Level 3</a>
              </li>
              <li>
                <a href="">3. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">3. Level 2</a>
            <ul>
              <li>
                <a href="">3. Level 3</a>
              </li>
              <li>
                <a href="">3. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>

    <li>
      <a href="">4. Level 1</a>
      <div class="mega-menu">

        <ul>
          <li>
            <a href="">4. Level 2</a>
            <ul>
              <li>
                <a href="">4. Level 3</a>
              </li>
              <li>
                <a href="">4. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">4. Level 2</a>
            <ul>
              <li>
                <a href="">4. Level 3</a>
              </li>
              <li>
                <a href="">4. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="">5. Level 1</a>
      <div class="mega-menu">

        <ul>
          <li>
            <a href="">5. Level 2</a>
            <ul>
              <li>
                <a href="">5. Level 3</a>
              </li>
              <li>
                <a href="">5. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">5. Level 2</a>
            <ul>
              <li>
                <a href="">5. Level 3</a>
              </li>
              <li>
                <a href="">5. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="">6. Level 1</a>
      <div class="mega-menu">

        <ul>
          <li>
            <a href="">6. Level 2</a>
            <ul>
              <li>
                <a href="">6. Level 3</a>
              </li>
              <li>
                <a href="">6. Level 3</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="">6. Level 2</a>
            <ul>
              <li>
                <a href="">6. Level 3</a>
              </li>
              <li>
                <a href="">6. Level 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</header>