Just Harry Roberts' nav abstraction, robust-ified with code to eliminate the whitespace between inline-block elements. I have to do this every time anyway, so now it's built into the snippet.Monospace font is set to ensure the amount of space is as cons

index.html

<div class="nav">
  <li class="box"><a href="">One</a></li>
  <li class="box"><a href="">Two</a></li>
  <li class="box"><a href="">Three</a></li>
</div>

style.css

/* The improved nav abstraction */
.nav {
  list-style:none;
  /* fix inline-block whitespace jank */
  /* http://nerd.vasilis.nl/remove-whitespace-inline-block/ */
  font-family: 'courier new', 'DejaVu Sans Mono', monospace;
  letter-spacing: -.6em; /* 6px */
}
  .nav > li, .nav > li a {
    display:inline-block;
    /* fix inline-block whitespace jank */
    letter-spacing: normal;
    font-family: sans-serif;
  }

/* make this thing look pretty */
body {
  font-size:62.5%;
  margin: 2em;
}
.box {
  background-color: #bada55;
  padding: 1em;
}
.box:hover {
  background-color: #0b5e55;
}
.box:hover a {
  color: #bada55;
}
a {
  color: #0b5e55;
  text-decoration: none;
}