.nav {
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  border-left: 1px solid #999;
  padding: 0;
  list-style: none;
}
.nav > li > a {
  display: block;
  padding: 10px 15px;
  background: #ccc;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #999;
  text-decoration: none;
  color: #000;
}
.nav li a:hover, 
.nav li a.active {
  background: #B3B3B3;
  color: #F2F2F2;
}
.nav section {
  position: absolute;
  top: -9999px;
  left: -9999px;
  float: left;
  background: #B3B3B3;
  overflow: hidden; 
  padding: 1rem;
}
.nav section.is-open {
  position: static;
  margin-bottom: 1rem;
}

@media (min-width: 30em) { 
  .nav {
    width: 80%; 
    position: relative; 
    border: none; 
  }
  .nav li { 
    display: inline; 
  }
  .nav li a {
    display: inline-block;
  }  
}

body {
  padding: 2rem;
}