/* define a certain width for the entire menu width */
.navigation {
	width: 140px;
}

/* reset our list to remove bullet points and padding */
.mainmenu,
.submenu {
	list-style: none;
	padding: 0;
	margin-left: 0;
	border-radius: 0.3rem;
}

/* make all links have the padding and the background color */
.mainmenu a {
	display:block;
	background-color:rgba(63,63,63,1);
	text-decoration:none;
	padding:0;
	margin:0;
	color:rgba(255,255,255,1);
}

/* add the hover behaviour */
.mainmenu a:hover {
	background-color:#1fa3ec;
	color:rgba(0,0,0,1);
	padding-left:5px;
	border-radius:0.3rem;
}

/* hovering over a .mainmenu item, display the submenu inside it. 
   changing the submenu's max-height from 0 to 200px; 
*/
.mainmenu li:hover .submenu {
	 display:block;
	 max-height:200px;
}

/* overwrite the background-color for .submenu links */
.submenu a {
	background-color: rgba(255,255,255,0.5);
} 

/* hover behaviour for links inside .submenu */
.submenu a:hover { 
	background-color: #1fa3ec;
	padding-left: 5px;
}

/* tinitial state of all submenus set it to max-height: 0, 
   and hide the overflowed content
*/
.submenu {
	margin-left: 10px;
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 1s ease-out;
}