html,body,ul,li,ol,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend {
	margin:0;
	padding:0;
	list-style:none;
}
input,img {
	margin:0;
	padding:0;
	border:0 none;
	outline:-style:none;
	vertical-align:middle;
}
textarea {
	resize:none;
}
table {
	border-collapse:collapse;
}
a {
	text-decoration:none;
}
.h1 {
	height:1px;
}
.h2 {
	height:2px;
}
.h3 {
	height:3px;
}
.h4 {
	height:4px;
}
.h5 {
	height:5px;
}
.h6 {
	height:6px;
}
.h7 {
	height:7px;
}
.h8 {
	height:8px;
}
.h9 {
	height:9px;
}
.h10 {
	height:10px;
}
.h11 {
	height:11px;
}
.h12 {
	height:12px;
}
.h13 {
	height:13px;
}
.h14 {
	height:14px;
}
.h15 {
	height:15px;
}
.h16 {
	height:16px;
}
.h17 {
	height:17px;
}
.h18 {
	height:18px;
}
.h19 {
	height:19px;
}
.h20 {
	height:20px;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.cb {
	clear:both;
}
.clearfix:after {
	content:"";
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both;
}
.clearfix {
	zoom:1;
}
body {
	background-color:#ccc;
}
a {
	color:#888;
	font-family:"Microsoft YaHei";
}
div {
	width:80%;
	height:50px;
	margin:100px auto;
	background-color:#292929;
}
div>ul {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
}
div>ul>li {
	width:300px;
	height:50px;
	line-height:50px;
	text-align:center;
	cursor:pointer;
}
div li:hover {
	background:#1c1c1c;
}
.subnav {
	width:100%;
	perspective:400px;
	perspective-origin:top;
	max-height:0;
}
.subnav li {
	background:linear-gradient(#292929,#252525);
	opacity:0;
	transform:rotateY(90deg);
	transition:opacity 0.4s,transform 0.5s;
}
div>ul>li:hover .subnav li {
	opacity:1;
	transform:none;
}
div>ul>li:hover .subnav li:nth-child(1) {
	transition-delay:0ms;
}
div>ul>li:hover .subnav li:nth-child(2) {
	transition-delay:50ms;
}
div>ul>li:hover .subnav li:nth-child(3) {
	transition-delay:100ms;
}
div>ul>li:hover .subnav li:nth-child(4) {
	transition-delay:150ms;
}
div>ul>li:hover .subnav li:nth-child(5) {
	transition-delay:200ms;
}
div>ul>li:hover .subnav li:nth-child(6) {
	transition-delay:250ms;
}
.subnav li:nth-child(1) {
	transition-delay:250ms;
}
.subnav li:nth-child(2) {
	transition-delay:200ms;
}
.subnav li:nth-child(3) {
	transition-delay:150ms;
}
.subnav li:nth-child(4) {
	transition-delay:100ms;
}
.subnav li:nth-child(5) {
	transition-delay:50ms;
}
.subnav li:nth-child(6) {
	transition-delay:0ms;
}