<!--
  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="#!">
            Drop Down
          </a>

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

        <li>
          <a href="#!">
            Normal
          </a>
        </li>

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

          <ul class="nav__list__drop">
            <li>
              <a href="#!">
                Item 1 has a long name
              </a>
            </li>
            <li>
              <a href="#!">
                Item 2
              </a>
            </li>
          </ul>
        </li>
      </ul>

    </nav>
  </header>

</div>
/*
  General cleanup
*/

*,
*:before,
*:after {
  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 !important;
  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;
  transform: translateY(-20px);
  height: 1px;
  transition: transform .2s ease-in-out,
              opacity .1s ease-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;
  transform: translateY(0px);
  height: auto;
  z-index: 1;
}

.no-js .nav__list__drop {
  display: none;
}

.no-js .has-drop:hover .nav__list__drop {
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.