/* The submenus */
.nav ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	background-color: #FFF;
	left: 100%; top: 0;
	z-index: 9;	
}
/* General layout settings for the link containers of the submenus */
.nav ul li {
	position: absolute;
	top: -9999px; /* Hiding them */
	height: 0px;
	display: block;
	margin: 0;
	padding: 0;
	/* Making them to expand their height with a transition, for a slide effect */
	-webkit-transition: height .2s ease-in;
	-moz-transition: height .2s ease-in;
	-o-transition: height .2s ease-in;
	-ms-transition: height .2s ease-in;
}
/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */
.dropdown:hover>ul>li {
	height: 40px;
	position: relative;
	top: auto;
}
/* The submenu links */
.nav ul li a {
	/* Layout */
	width: 200px;
	display: block;
	position: relative;
	text-decoration: none;

	font-size: 14px; font-weight: 600; color: #444; padding: 10px 20px; border-bottom: 1px solid #ededed;

	-webkit-transition: color .3s ease-in, background .3s ease-in;
	-moz-transition: color .3s ease-in, background .3s ease-in;
	-o-transition: color .3s ease-in, background .3s ease-in;
	-ms-transition: color .3s ease-in, background .3s ease-in;
}
/* Changing the link's color and background on hover */
.nav ul li:hover>a, .nav ul li a:hover { color: #FFF; background-color: #5b4bcf;}

/* Making the level 2 (or higher) submenus to appear at the right of their parent */
.nav ul .dropdown:hover ul {
	top: 0px;
}