<nav>
  <ul>
  <li><a href="">Home</a></li>
  <li><a href="">Categories</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Portfolio</a></li>
  <li><a href="">Contact</a></li>
  </ul>
</nav>

nav{
  width: 960px;
  margin: 80px auto;
  text-align: center;
}

nav ul{
  margin: 0;
  padding: 0;
}

nav li{
  margin: 0 10px; /* Add some horizontal spacing */
  display: inline-block;
  *display: inline; /* IE7 and below */
  zoom: 1;
}

nav a{
  display: inline-block;
  position: relative;
  padding: 8px 15px;
  border: 2px solid #fff;
  text-decoration: none;
  color: #999;
  font: bold 14px 'Lucida sans', Arial, Helvetica;
  background-color: #eaeaea;
  background-image: linear-gradient(top, #eaeaea, #fff);
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
  0 0 1px 0 rgba(0, 0, 0, .2),
  0 2px 2px rgba(0, 0, 0, .3),
  0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
  background-color: #eee;
  background-image: linear-gradient(top, #eee, #fff);
}  

nav a:active{
  top: 1px; /* Simulate the push button effect */
  background: #f5f5f5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
  0 0 1px 0px rgba(0, 0, 0, .2),
  0 1px 2px rgba(0, 0, 0, .3);
}

nav a::before{
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  z-index: -1;
  background-color: #e3e3e3;
  background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}

nav a:active::before{
  top: -11px; /* Hey you, don't move! */
}