<input type="checkbox" id="close">

<nav id="site-navigation" class="site-navigation" aria-label="Non-JavaScript Clickable Menu Demonstration">
  <ul class="main-menu">
    <li class="sub-menu-parent_li">
      <a href="#">Home</a>
    </li>
    <li class="sub-menu-parent_li">
      <div class="sub-menu-parent_div">
        <span tabindex="0">
          Services
          <span class="open">&#5167;</span>
        </span>
        <label class="close" for="close">&#10006;</label>
        <ul>
          <li><a href="#">Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Content Strategy</a></li>
          <li><a href="#">Training</a></li>
        </ul>
      </div>
    </li>
    <li class="sub-menu-parent_li">
      <div class="sub-menu-parent_div">
        <span tabindex="0">
          Portfolio
          <span class="open">&#5167;</span>
        </span>
        <label class="close" for="close">&#10006;</label>
        <ul>
          <li><a href="#">Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Content Strategy</a></li>
          <li><a href="#">Training</a></li>
        </ul>
      </div>
    </li>
    <li class="sub-menu-parent_li">
      <div class="sub-menu-parent_div">
        <span tabindex="0">
          About
          <span class="open">&#5167;</span>
        </span>
        <label class="close" for="close">&#10006;</label>
        <ul>
          <li><a href="#">Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Accessibility</a></li>
          <li><a href="#">Content Strategy</a></li>
          <li><a href="#">Training</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all other theme stylesheets.
 */

a,
label,
span {
  font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}

input {
  position: absolute;
  left: 9999px;

  width: 0;
  height: 0;
}

span,
label {
  cursor: pointer;
}

.site-navigation {
  width: 100%;
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
}

.sub-menu-parent_li {
  position: relative;

  flex-basis: 25%;

  min-width: 96px;
  margin-left: 0;

  list-style: none;
}

.sub-menu-parent_li ul {
  display: none;
}

.sub-menu-parent_li .close {
  display: none;
}

.sub-menu-parent_li:focus-within .close {
  display: inline-block;
}

.sub-menu-parent_li:focus-within .open {
  display: none;
}

.sub-menu-parent_li:focus-within span {
  cursor: auto;
}

.sub-menu-parent_div:focus-within ul {
  display: block;

  padding-left: 16px;
}