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;
}