Simple CSS Horizontal Dropdown Menu

The markup contains a nested unordered list inside a list item to create the dropdown list. It is activated by :hover when the mouse is over the appropriate list item. Below is an example markup. Two of the items have dropdowns.

											
<nav>
	<ul>
		<li><a href="#">Main 1</a></li>
		<li><a href="#">Main 2</a>
			<ul>
				<li><a href="#">Sub 1</a></li>
				<li><a href="#">Sub 2</a></li>
				<li><a href="#">Sub 3</a></li>
			</ul>
		</li>
		<li><a href="#">Main 3</a></li>
		<li><a href="#">Main 4</a>
			<ul>
				<li><a href="#">Sub 1</a></li>
				<li><a href="#">Sub 2</a></li>
				<li><a href="#">Sub 3</a></li>
			</ul>
		</li>
		<li><a href="#">Main 5</a></li>
	</ul>
</nav>
							
					
			

Below is sample CSS code. Adjust for padding, margin, colors, etc

					
/* These styles go in your style sheet */

	nav {
/* Set max width if necessary */
/* max-width: 1000px;*/
}

nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-around;
}

nav li {
	/* Adjust width for how many nav items you have */
	width: 20%;
}

nav a {
	display: block;
	width: 100%;

}

nav li ul {
	display: none;
	position: relative;
	width: 20%;
}

nav li:hover ul {
	display: block;
	position: absolute;
	width: 100%;
}

nav li li {
	/* Style dropdown list items here */

}

nav ul ul a {
	text-align: left;
	padding: 10px;
}