<!doctype html>
<div>
 <article id="main">
  Interesting Stuff to Read
 </article>
 <nav>
  <ul>
   <li>
    <a href="…">About</a>
    <ul>
     <li><a href="…">History</a>
     <li><a href="…">Mission</a>
     <li><a href="…">People</a>
    </ul>
   <li>
    <a href="…">Projects</a>
    <ul>
     <li><a href="…">Art</a>
     <li><a href="…">Architecture</a>
     <li><a href="…">Music</a>
    </ul>
   <li>
    <a href="…">Interact</a>
    <ul>
     <li><a href="…">Blog</a>
     <li><a href="…">Forums</a>
     <li><a href="…">Events</a>
    </ul>
  </ul>
 </nav>
</div>
<style>
body {
 background: papayawhip;
}
div {
 box-shadow: 3px 3px 10px #333;
 background: white;
 text-align: center;
 font-family: sans-serif;
 font-size: 30px;
 border-radius: .5em;
}
div > * {
 border-radius: .5em;
}
article {
 background: white;
}
ul,
li {
 list-style: none;
 margin: 0;
 padding: 0;
}
nav > ul {
 background: #444;
 border-radius: 0.5em;
 padding: 0.075em;
}
li {
 padding: 0 .5em;
 background: #ddd;
 color: black;
 border-radius: .4em;
 border: #444 solid .075em;
}
li li {
 background: #444;
 color: white;
 margin: 0 -.5em;
 border-radius: 0;
}
li li:first-child {
 border-radius: .375em .375em 0 0;
}
a {
 background: transparent;
 color: inherit;
}
a:not(:hover) {
 text-decoration: none;
}
nav > ul > li:target,
nav > ul > li:hover {
 background: #888;
 color: white;
}
</style>
<style>
div {
  display: -webkit-flex;
}
article {
  -webkit-flex: 1;
}
nav {
}
nav > ul > li {
  display: -webkit-flex;
  -webkit-flex-flow: column;
}
li:not(:hover) ul {
   display: none;
}
</style>