A Click/Touch-Activated JavaScript-free Dropdown Menu

by agib

HTML

<!-- An attempt at figuring out the mechanics of Demo 1 here: http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
-->
<header id="top"> <a href="#dropdown-nav"><div class="button" id="show">Menu</div></a>  

    <h1>A Click/Touch-Activated JavaScript-free Dropdown Menu</h1>

</header>
<div id="dropdown-nav"> <a href="#top"><div class="button" id="hide">Close</div></a>

  <ul>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
    <li><a href="#">Page 3</a>
    </li>
    <li><a href="#">Page 4</a>
    </li>
    <li><a href="#">Page 5</a>
    </li>
  </ul>    
  <ul> 
    <li><a href="#">Page 6</a>
    </li>
    <li><a href="#">Page 7</a>
    </li>
    <li><a href="#">Page 8</a>
    </li>
    <li><a href="#">Page 9</a>
    </li>
    <li><a href="#">Page 10</a>
    </li>
  </ul>
</div>

CSS

body, a {
  color: White;
  font-family: Arial, sans-serif;
  text-transform:uppercase;
  text-decoration:none;
  letter-spacing: 0.1em;
}
header a {
  display:inline-block;
}
header {
  padding: 0.5em 0 0 0.5em;
  width: 100%;
  height: 3em;
  background-color: #333;
  color: White;
  text-transform: capitalize;
}
header h1 {
  display:inline-block;
  margin-left: 0.5em;
  font-size: 100%;
  font-weight:bold;
  line-height:15%;
  color: #F8F8F8;
}
#dropdown-nav {
  position:absolute;
  width:100%;  
  background-color:#555;
  display:none;
}
#dropdown-nav:target {
  display:block;
}
#dropdown-nav ul {
  width:50%;
}
#dropdown-nav ul li {
  width:100%;
}
#dropdown-nav ul li a {
  display:block;
  padding:0.75em 0.75em;
}
#dropdown-nav ul {
  float:left;
}
#dropdown-nav ul li a:hover {
  background-color:#777;
  outline:1px Solid #AAA;
}
.button {
  height: 2em;
  width: 4em;
  border: 0.1em #FFF Solid;
  padding: 0.2em 0 0 0.2em;
}
.button#hide {
  position:absolute;
  top:-3em;
  left:0.5em;
  background-color: #333;
}

JavaScript

/* No JavaScript used */