<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! */  
  }