.nav {
	list-style:none;
}
.nav li {
	float:left;
	height:50px;
	width:100px;
	border:1px solid #EEEEEE;
	background:wheat;
	text-align:center;
	line-height:50px;
	position:relative;
	cursor:pointer;
	overflow:hidden;
}
.nav li>div {
	transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-webkit-transition:all .3s;
}
.nav li>div:first-child {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background:aqua;
}
.nav li>div:last-child {
	position:absolute;
	bottom:-52px;
	left:0;
	right:0;
	background:red;
}
.nav li:hover>div:last-child {
	bottom:0;
}
.nav li:hover>div:first-child {
	bottom:52px;
}