body{
	font-family:15px arial;
	font-weight:300;
	background:#EBE8E4;
}
nav{
	background:#fff;
	border:1px solid #dedede;
	border-radius:4px;
	box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color:#888;
	display:block;
	margin:8px 22px 8px 22px;
	overflow:hidden;
	width:90%;
}
nav ul{
	margin:0;
	padding:0;
}
nav ul li{
	display:inline-block;
	list-style-type:none;

	-webkit-transition:all 0.2s;
	-moz-transition:all 0.2s;
	-o-transition:all 0.2s;
}
nav>ul>li>a>.caret{
	border-top:4px solid #aaa;
	border-right:4px solid transparent;
	border-left:4px solid transparent;
	content:"";
	display:inline-block;
	height:0;
	width:0;
	vertical-align:middle;

	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
}
nav>ul>li>a{
	color:#aaa;
	display:block;
	line-height:56px;
	padding:0 24px;
	text-decoration:none;
}
nav>ul>li:hover{
	background-color:#404447;
}
nav>ul>li:hover>a{
	color:rgb(255, 255, 255);
}
nav>ul>li:hover>a>.caret{
	border-top-color:rgb(255, 255, 255)
}
nav>ul>li>div{
	padding:5px;
	background-color:#404447;
	border-top:0;
	border-radius:0 0 4px 4px;
	margin:0;
	opacity:0;
	display:none;
	position:absolute;
	width:165px;
	visibility:hidden;

	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}
nav>ul>li:hover>div{
	display:block;
	opacity:1;
	visibility:visible;
}
nav>ul>li>div ul>li{
	display:block;
}
nav>ul>li>div ul>li>a{
	color:#fff;
	display:block;
	padding:12px 24px;
	text-decoration:none;
}
nav>ul>li>div ul>li:hover>a{
	background-color:rgba(255, 255, 255, 0.1);
}