[HTML5] Using the focus event to improve navigation accessibility (nextElementSibling)

    <nav>
      <ul class="menu">
        <li class="menu__item">
          <a href="/" class="menu__link">About</a>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">News</a>
          <ul class="submenu">
            <li class="submenu__item">
              <a href="/" class="submenu__link">Press Releases</a>
            </li>
            <li class="submenu__item">
              <a href="/" class="submenu__link">Blog</a>
            </li>
          </ul>
        </li>
        <li class="menu__item">
          <a href="/" class="menu__link">Contact</a>
        </li>
      </ul>
    </nav>

const topMenuLinks = document.querySELEctorAll(".menu__link");

topMenuLinks.forEach(link => {
  if (link.nextElementSibling) {
    link.addEventListener("focus",function() {
      this.parentElement.classList.add("focus");
    });
  }
});

.menu {
  display: flex;
  list-style: none;

  &__item {
    position: relative;

    &:hover .submenu,&.focus .submenu {
      transform: scaleY(1);
    }
  }