* {
	margin:0;
	padding:0;
}
li {
	list-style:none
}
.nav {
	width:400px;
	height:40px;
	background-color:#30ea70;
	margin:100px auto;
}
.nav div {
	float:left;
	text-align:center;
	width:25%;
	height:100%;
}
.nav .nav-main h4 {
	width:100%;
	height:100%;
	line-height:40px;
	text-align:center;
	color:#fff;
}
.nav .nav-main ul {
	width:100%;
	height:400%;
	/* background-color:#eee;
	*/
      display:none;
}
.nav .nav-main:hover {
	background-color:pink;
}
.nav .nav-main:first-child ul {
	background-color:red;
}
.nav .nav-main:nth-of-type(2) ul {
	background-color:green;
}
.nav .nav-main:nth-of-type(3) ul {
	background-color:blue;
}
.nav .nav-main:nth-of-type(4) ul {
	background-color:purple;
}
.nav .nav-main ul li {
	width:100%;
	height:25%;
	line-height:40px;
	color:#fff;
}
.nav .nav-main ul li:hover {
	background-color:red;
}