よく見かけるマウスでクリックしたときに起きる(:active)の影をCSS3でやってみようということです。

対応ブラウザ◯ Google Chrome / Firefox / Opera× Safari / InternetExplorer

HTML source

<ul>
  <li><a href="#">menu1</a></li>
  <li><a href="#">menu2</a></li>
  <li><a href="#">menu3</a></li>
  <li><a href="#">menu4</a></li>
  <li><a href="#">menu5</a></li>
</ul>

• この場合は、簡単にul>li>aという感じにソースを書きます

CSS source

ul {
	width: 800px;
	margin: 20px auto;
	border: 2px solid #FF0;
	box-shadow: 0 0 3px #ccc;
	border-radius: 3px;
	overflow: hidden;
	font-family: 'Arvo', arial, serif;
}

ul li {
	float: left;
}
ul li a {
	display:block;
	width: 158px;
	border-right: #F96 1px solid;
	border-left: #FF0 1px solid;
	background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.36, rgb(255,196,0)),  color-stop(0.84, rgb(255,217,0)) );
	background-image: -moz-linear-gradient(  center bottom,  rgb(255,196,0) 36%,  rgb(255,217,0) 84% );
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 55px;
	text-align: center
}

• 今回は画像を使わずにグラデーションで背景を表示しています

ul li a:hover, ul li a:active {
	background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.36, rgb(255,128,0)),  color-stop(0.84, rgb(207,86,0)) );
	background-image: -moz-linear-gradient(  center bottom,  rgb(255,128,0) 36%,  rgb(207,86,0) 84% );
	box-shadow: 0px 0px 3px #888 inset;
	color: #fff;
}

• こちらもグラデーションを使っています。

ul li a:active {
	box-shadow: 0px 0px 6px #444 inset
}

• こちらが押している感じにするCSSです。
• CSS3のbox-shadowを記述し、最後のところにinsetを入力してあげると内側への影がつきます。ただしinsetと付けないものとは併用できません