Refer to this website

The source code:

<html>
<style>
/* General cleanup */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html.body {
  font-family: helvetica, arial, sans-serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

nav ul.nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sr-only {
  position: absolute;
  clip: rect(1px.1px.1px.1px);
  font-size: 1px;
}

/* Demo */
.show-nav {
  position: fixed;
  top: 0;
  right: 0;
}

.nav__list {
  background: #fafafa;
  border-bottom: 1px solid # 444;
  text-align: center;
  position: relative;
  z-index: 2;
}

.nav__list > li {
  display: inline-block;
}

.nav__list a {
  display: block;
  padding: 20px;
  position: relative;
  z-index: 2;
}

.nav__list a:hover..nav__list a:focus {
  background: # 222;
  color: #fff;
}

.has-drop {
  position: relative;
}

.nav__list__drop {
  left: 0;
  margin: 0;
  position: absolute;
  text-align: left;
  top: 100%;
  opacity: 0;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  height: 1px;
  -webkit-transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  transition: opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out, opacity .1s ease-out;
  transition: transform .2s ease-in-out, opacity .1s ease-out, -webkit-transform .2s ease-in-out;
  overflow: hidden;
  z-index: 1;
}

.nav__list__drop {
  background: #fafafa;
  border: 1px solid # 444;
  border-top: 0;
  min-width: 100%;
}

.nav__list__drop a {
  padding: 12px 20px;
  white-space: nowrap;
}

.nav__list a:focus + .nav__list__drop..has-drop:hover .nav__list__drop..nav__list__drop:focus-within {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  height: auto;
  z-index: 1;
}

/* 1. This right here, the :focus-within pseudo-class removes the need for all the JS that was in the original version of this pen, to reveal the dropdown menus on keyboard focus of the primary  or any of the visually hidden s of the drop down menus. */
</style>
<div class="page">

  <header role="banner" aria-label="Primary">

    <nav role="navigation" aria-label="Primary" id="nav" class="nav">

      <ul id="nav_inner" class="nav__list">
        <li class="has-drop">
          <a href="#!">The drop-down menu</a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">Sub menu 1</a>
            </li>
            <li>
              <a href="#!">Sub menu 2</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#!">Common link</a>
        </li>

        <li class="has-drop">
          <a href="#!">Drop-down menu 2</a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">Submenu 1 has a slightly longer name</a>
            </li>
            <li>
              <a href="#!">Sub menu 2</a>
            </li>
          </ul>
        </li>
      </ul>

    </nav>
  </header>

</div>
</html>
Copy the code

Final effect: