ナビ：マウスオーバーで色変更茅ヶ崎のホームページ制作

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