xGVGVy

index.html

<div class="dropdown">
  <input type="checkbox" name="foo-input" id="foo-input" class="expand-input" autocomplete="off" />
  <label for="foo-input" class="expand-label">Foo Menu - Click here to toggle</label>
  <nav class="expand-block">
    <ul>
      <li><a href="">Foo 1</a></li>
      <li><a href="">Foo 2</a></li>
      <li><a href="">Foo 3</a></li>
      <li><a href="">Foo 4</a></li>
      <li><a href="">Foo 5</a></li>
    </ul>
  </nav>
</div>

style.css

.dropdown {}

.expand-label {
  background: #e7e7e7;
}

.expand-block {
  opacity: 0;
  transition: all .4s linear;
  position: relative;
  overflow: hidden;
  z-index: 10;
  height: 0;
}

.expand-input:checked ~ .expand-label {
  background-color: #ffe7e7;
}

.expand-input:checked ~ .expand-block {
  opacity: 1;
  height: initial;
}

/* The CSS Below is irrelevant */

.expand-label {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.expand-input {
  display: none;
}

.expand-block ul {
  padding-left: 0;
  margin: 0;
}

.expand-block li {
  border: 1px solid #ccc;
  list-style: none inside;
}

.expand-block a {
  display: block;
  text-decoration: none;
  padding: 10px;
}

.expand-block li + li {
  margin-top: 2px;
}

xGVGVy.markdown

xGVGVy ('-' * 6)

A Pen by Captain Anonymous on CodePen.

License.