<nav>
	<ul>
		<li>
				<details class="dropdown">
					<summary><a href="#">Home</a></summary>
					<a href="#">About Us</a>
					<a href="#">Contact Us</a>
		</li>
		<li>
				<details class="dropdown">
					<summary><a href="#">Services</a></summary><details class="dropdown inner-dropdown">
						<summary><a href="#">About Us</a></summary>
					<a href="#">About Us</a>
						<a href="#">About Us</a>
						<a href="#">About Us</a>
				</details>
				</details>
		</li>
		<li>
				<details class="dropdown">
					<summary>Contact Us</summary>
					<a href="#">More info</a>
		</li>
	</ul>
</nav>
nav ul{
	display: flex;
	grid-gap: 1rem;
	justify-content: center;
	padding: 0;
}
nav ul li{
	padding:1rem 2rem;
	list-style: none;
	outline: 0;
}
 nav a{
	color: #333;
	font-size: 2rem;
	text-decoration: none;
}
nav a,summary{
	font-size: 1.5rem;
}
.dropdown{
		
}
.dropdown a{
	display: block;
}
summary{
	display: flex;
	align-items: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.