*{
	margin: 0;
	padding: 0;
	list-style: none;
}
body{
	background: url("../img/bg.jpg") no-repeat;
	background-size: cover;
	font-family: 'Microsoft yahei',Arial,sans-serif;
	}
#menu{
	width: 80%;
	height: 135px;
	margin: 50px auto 0; 
}
#menu ul{
	position: relative;
}
#menu ul li{
	position: relative;
	z-index: 2;
	float: left;
    width: 16.6%;
    height: 135px;
    text-align: center;
    line-height: 220px;
    background-position: 50%;
    color: #D8D8D8;
}
.rocket{
	background: url("../img/rocket-large.png") no-repeat;
}
.wine{
	background: url("../img/wine-large.png") no-repeat;
}
.burger{
	background: url("../img/burger-large.png") no-repeat;
}
.comment{
	background: url("../img/comment-large.png") no-repeat;
}
.sport{
	background: url("../img/sport-large.png") no-repeat;
}
.earth{
	background: url("../img/earth-large.png") no-repeat;
}

.current{
	position: absolute;
	z-index: 1;
    top:-15px;	
    left: 8%;
	width: 9%;
	height: 165px;
	margin-left: -4.5%;
	border-radius: 8px;
	background: #c39449;  
	transition: all 400ms cubic-bezier(.16,1.23,.87,1.16); 
}
/*.wine:hover ~ .current{
	left:24.7%;
}
.burger:hover ~ .current{
	left:41.4%;
}
.comment:hover ~ .current{
	left:58.1%;
}
.sport:hover ~ .current{
	left:74.8%;
}
.earth:hover ~ .current {
	left:90.5%;
}*/
.triangle{
	position: absolute;
	z-index: 3;
	left: 7.4%;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
	transition: all 400ms cubic-bezier(.16,1.23,.87,1.16);
}
#triangle-up{
	top:120px;
    border-bottom: 15px solid #c39449;
}
#triangle-down{
	top:0px;
    border-top: 15px solid #c39449;
}
/*.wine:hover ~ .triangle{
	left:24.2%;
}
.burger:hover ~ .triangle{
	left:40.7%;
}
.comment:hover ~ .triangle{
	left:57.5%;
}
.sport:hover ~ .triangle{
	left:73.9%;
}
.earth:hover ~ .triangle{
	left:90.5%;
}*/
#content{
	position: relative;
	width: 79.7%;
	height:300px;
	margin:20px auto 20px; 
    background-color: rgb(62,62,62);
}