[Malleys]

Заменил SPAN на A, и LI на LI > A дабы увеличить доступность! (У вас совершенно не фокусируемые разделы)

Изначально все dropdown-menu скрыты через класс .d-none.

Это WET, а мне нравится DRY и он практичней. (Ну не буду же я добавлять каждый раз этот класс, ведь такое меню подразумевает так и так, что всё скрыто изначально)

При повторном клике на этот же dropdown-item блок dropdown-menu должен закрыться.

А я считаю, что должен оставаться открытым. (И пользователи Windows любят делать двойные щелчки)

Вот так получилось...

<nav>
	<ul>
		<li>
			<a href="#">Dropdown menu item</a>
			<ul>
				<li><a href="#1">Dropdown item 1</a></li>
				<li><a href="#2">Dropdown item 2</a></li>
				<li><a href="#3">Dropdown item 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#blog">Category</a>
			<ul>
				<li><a href="#1">Category 1</a></li>
				<li><a href="#2">Category 2</a></li>
				<li><a href="#3">Category 3</a></li>
			</ul>
		</li>
		<li>
			<a href="#about">About</a>
			<ul>
				<li><a href="#1">Bio</a></li>
				<li><a href="#2">Photos</a></li>
				<li><a href="#3">Social</a></li>
			</ul>
		</li>
	</ul>
</nav>

<style>

nav ul {
	display: flex;
	justify-content: center;
	list-style: none;
	padding: 0;
}

nav li {
	flex: 1;
	position: relative;
}

nav a {
	display: block;
	text-decoration: none;
	background: rebeccapurple;
	font-weight: bold;
	color: white;
	padding: 1em;
	text-align: center;
}

nav li li a {
	background: #e6d9f2;
	color: black;
	font-weight: 300;
}

nav a:focus {
	background: #ff5500;
}

nav a + ul {
	position: absolute;
	flex-flow: column;
	width: 100%;
}

/* механизм переключения видимости */
nav li ul {	display: none; }
	
nav li:focus-within ul { display: initial; }
	
nav li:focus ul { display: initial; }
	
nav a:focus {
	background: black;
	color: white
}

</style>