* {
	font-family: sans-serif;
	list-style:none;
	text-decoration:none;
	margin:0;
	padding:0;
}
/*
Se especifica que solo los li que sean descendientes directos 
del primer ul tengan float: left, esto es para que solo el 
menu principal sea horizontal y los submenús se mantengan en vertical:
*/
.nav {
	display: flex;
  	justify-content: center;
}

.nav > li {
	float:left;
}
.nav li a {
	background:#0759A7;
	color:#FFF;
	display:block;
	border:1px; solid;
	padding:10px; 12px;
}
.nav li a:hover {
	background:#0774a7;
}

/*
Por defecto todos los submenus no serán visibles, los 
ocultaremos usando display:none;se especifica que solo los li que sean descendientes 
directos del primer ul tengan float: left; 
*/
.nav li ul {
	display:none;
	position:absolute;
	min-width:180px;
}
/*
Todos los submenus tendrán un ancho mínimo de 140px para que no se vean desiguales
y llevarán position:absoluta;  para que no afecten el ancho del menu principal
*/
.nav li:hover > ul {
	display:block;
}
/*
Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo 
ancestro li:
*/
.nav li ul li {
	position:relative;
}

.nav li ul li ul {
	right: -180px;
	top:0;
}