* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	background-color:#f2f2f2;
}
ul {
	position:relative;
	width:800px;
	height:40px;
	border-bottom:2px solid skyblue;
	margin:50px auto;
	line-height:40px;
}
li {
	text-align:center;
	width:25%;
	height:100%;
	float:left;
	transition:color .3s;
}
li:hover {
	color:white;
}
li.bg {
	position:absolute;
	background:skyblue;
	top:0;
	left:0;
	z-index:-1;
}
div.content {
	position:relative;
	width:800px;
	min-height:300px;
	line-height:300px;
	margin:40px auto;
	text-align:center;
	border:1px solid silver;
	border-radius:30px;
}
div.content>div {
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
}
div.content>div:nth-of-type(1) {
	color:wheat;
}
div.content>div:nth-of-type(2) {
	color:aquamarine;
}
div.content>div:nth-of-type(3) {
	color:palegreen;
}
div.content>div:nth-of-type(4) {
	color:plum;
}
button {
	display:block;
	margin:0 auto;
	width:120px;
	height:30px;
	background:#87CEEB;
	color:white;
	border-radius:15px;
	outline:none;
}