:root {
	--navheight : 60px;
	--white :#fff;
	--black :#000;
}

* {
	margin:0px;
	padding:0px;
}

body {
	font-family:arial;
	background-image:url(https://cdn.pixabay.com/photo/2015/01/06/14/18/turbine-590354_1280.jpg);
	background-size:cover;
}

nav {
	height:var(--navheight);
	border-top:1px solid rgb(255,255,255,0.2);
	width:80%;
	margin:20px auto 0px;
}

nav h4 {
	color:var(--white);
	line-height:var(--navheight);
	text-transform:uppercase;
	letter-spacing:2px;
	float:left;
	padding:0px 60px;
}

nav i {
		font-size:11px;
	}
	
nav ul li ul li i {
	float:right;
}	
	
nav ul {
	float:left;
}

nav ul li {
	position:relative;
	float:left;
	list-style-type:none;
}

nav ul li a {
	display:block;
	text-decoration:none;
	color:var(--white);
	letter-spacing:2px;
	border:0px solid red;
	text-transform:uppercase;
	font-size:12px;
	padding:22px 12px;
}

nav ul li ul {
	display:none;
	position:absolute;
	background-color:var(--white);
	border-radius:2px;
}

nav ul li ul li {
	width:180px;
	border-radius:0px 0px 2px 2px;
	box-sizing:border-box;
	padding:2px;
}

nav ul li ul li a {
	padding:15px 12px;
	color:var(--black);
}

nav ul li ul li a:hover {
	background-color:gray;
	color:var(--white);
	border-radius:2px;
}

	
nav ul li ul li ul{
	display:none;
	position:absolute;
	background-color:var(--white);
	border-radius:2px;
	margin-left:180px;
}

nav ul li:hover>ul {
	display:block;
}

nav ul li ul li:hover>ul {
	display:block;
}