HTML
               
                  
            
            
            
         ナビ:マウスオーバーで色変更
★マウスオーバーで色がふわっと変更
要素にtransition: all 0.5s;
HTML
<nav id="globalNav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">会社案内</a></li> <li><a href="#">事業案内</a></li> <li><a href="#">導入事例</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </nav> <!-- /ID globalNav -->
CSS
#globalNav {
	display: block;
	margin: 0;
	padding: 0;
	height: 67px;
	clear: both;
}
#globalNav ul {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
}
#globalNav li {
	display: inline;
}
#globalNav li a {
    display: block;
    margin: 0;
    padding: 30px 0;
    width: 14%;
    float: left;
    text-align: center;
    list-style: none;
    background: #EEE;
    border-right: 2px solid #FFF;
    color: #333;
    letter-spacing: 0.1em;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
#globalNav li a:hover {
	background: #063;
	color: #FFF;
}
               