hover擬似クラス

:hover　カーソルなどが乗った際のスタイルを指定します。
　　　　a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。
:active　要素がアクティブになった際のスタイルを指定します。
　　　　a:activeでは“クリックされてから離されるまでの状態”です。

HPのサンプル作成
↓一部

HTML

<div class="navi">
			<ul>
				<li><a href="#">トップページ<br><span>Top</span></a></li>
				<li><a href="#">ごあいさつ<br><span>Greeting</span></a></li>
				<li><a href="#">サービス概要<br><span>Service</span></a></li>
				<li><a href="#">弊社の取り組み<br><span>Approach</span></a></li>
				<li><a href="#">会社情報<br><span>Company</span></a></li>
				<li><a href="#">お問い合わせ<br><span>Contact</span></a></li>
			</ul>
		</div>

CSS

.navi{
	width:100%;
	height:50px;
	background:#f1f1f1;
}
.navi:after{
	content:"";display:block;clear:both;
}
.navi ul{
	width:930px;
	margin:0px auto 0px auto;
	padding:0px;
}
.navi ul li{
	float:left;
	width:16.5%;
	height:50px;
	font-size:12px;
	text-align:center;
	background:#eeeeee;
	list-style-type: none
}
.navi ul li a{
	width:100%;
	height:45px;
	padding-top:5px;
	display:block;
	text-decoration:none;
}
.navi ul li a:hover{
	color:#fff;
	background-color:#ccc;
}