平行四边形导航，背景颜色渐变动画（不支持IE6/7/8）

body{ font-size: 14px; }
ul ,li{ margin:0px; padding:0px; list-style: none;  }
	.box{  1000px; height: 40px; background:rgba(0,0,255,.7); color: white; text-align: center; transform: skew(-45deg) }
	.box > ul{ margin-left: 21px; margin-right: 21px; transform: skew(45deg) }
	.box > ul:after{ content: ""; display: block; clear: both;  }
	.box > ul li{  100px; line-height: 40px; height: 40px; float: left; position: relative;  }
	.box > ul li span{ display: block; 100%; position: absolute; left: 0px; top:0px; }
	.box > ul li span:first-child{ height: 0; transition: height .5s; background-color: rgb(0,0,255); z-index: -1; }
	.box > ul li span:last-child{ height: 100%; z-index: 1; }
	.box > ul li:hover span:first-child{ height: 100%; }

<div class="box">
	<ul>
		<li><span></span><span>首页</span></li>
		<li><span></span><span>关于我们</span></li>
		<li><span></span><span>联系我们</span></li>
		<li><span></span><span>公司简介</span></li>
	</ul>
</div>