CSS3导航栏悬浮动画

支持Chrome、FireFox、Safari；IE8有效果但是没有动画，IE9、IE10没有测试；Opera虽然支持伪元素，但是不支持动画，令人费解啊，不过我大Opera已经投向了Webkit怀抱！

具体效果看上面的导航栏↑↑

#menu ul li a {
	display: block;
	border-bottom: 0;
	color: #6a6a6a;
	line-height: 40px;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	height: 41px;
	margin-bottom: -1px;
}
#menu ul li a:after,
#menu ul li a:before {
	position: absolute;
	width: 0;
	height: 1px;
	left: 50%;
	bottom: 0;
	border-bottom: 1px solid #6a6a6a;
	content: "";
	z-index: 999;
        -webkit-transition: width .3s, left .3s;
        -moz-transition: width .3s, left .3s;
        transition: width .3s, left .3s;
}
#menu ul li a:hover:before {
	left: 0;
	width: 60%;
}
#menu ul li a:hover:after {
	width: 60%;
}