<!--
  Drop down menu example

  Note: this demo is not 
  currently setup for any
  specific responsive behaviors.
-->

<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="#!">
            下拉菜单
          </a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">
                子菜单1
              </a>
            </li>
            <li>
              <a href="#!">
                子菜单2
              </a>
            </li>
          </ul>
        </li>

        <li>
          <a href="#!">
            普通链接
          </a>
        </li>

        <li class="has-drop">
          <a href="#!">
            下拉菜单2
          </a>

          <ul class="nav__list__drop">
            <li>
              <a href="#!">
                子菜单1 的名字稍微有点长
              </a>
            </li>
            <li>
              <a href="#!">
                子菜单 2
              </a>
            </li>
          </ul>
        </li>
      </ul>

    </nav>
  </header>

</div>

/*
  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 <a>
     or any of the visually hidden <a>s of the drop down
     menus.
*/