Menu with submenu - reusable code

menu-submenu

.menu-main {
	padding: 		0;
	margin: 		0;
	list-style: 	none;
}

.menu-main > li {
	display: 		inline-block;
	
	/* THIS IS THE KEY TO THE SUBMENU! */
	position: 		relative;
}


.menu-main > li > a {
	display: 		block;
	padding: 		5px 8px;
	color: 			black;
}

	.menu-main > li > a:hover {
		color: 		#555;
	}

.menu-main .submenu {
	position: 			absolute;
	left: 				0;
	top: 				100%;
	
	/* HIDE THE SUBMENU */
	display: 			none;
}

.submenu > li {
	display: 			block;
}

.menu-main > li:hover .submenu {

	/* SHOW THE SUBMENU ON HOVER */
	display: 	block;
}