超シンプルなドロップダウンメニュー【コピペOK】

1 サンプル
2 HTML
3 CSS
4 最後に

ホームページを作ってる人なら、誰しも一度は通る道であろう、グローバルナビゲーションに、
階層機能(ドロップダウンメニュー)を追加するやつです。それを、シンプルにHTMLとCSSだけで簡単に実装できるコードです。

今回は、detailsタグとsummaryタグを使って実装するので、とにかく楽です。

※detailsの仕様上、JavaScriptなしだと、アニメーションができないっぽいので、アニメーションはなしです。
あくまでもシンプル&簡単に実装したい人向けのドロップダウンメニューです。

もしJavaScriptあり(コピペ)でアニメーションをさせたい場合は下記の記事を参考にしてみてください。

Zenn

details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう

https://zenn.dev/takanami/articles/2a87ede2ea5def

サンプル

サンプル
https://otusoa.github.io/simple-dropdown-menu/

HTML

			<nav>
				<ul class="nav-menu-list">

					<li>
						<a class="all-inherit-link" href="">ホーム</a>
					</li>

					<li>
						<details class="nest-box">
							<summary>ドロップダウンメニュー</summary>
							<ul class="nest-box-list">
								<li><a class="all-inherit-link" href="">中身</a></li>
								<li><a class="all-inherit-link" href="">中身2</a></li>
							</ul>
						</details>
					</li>

				</ul>
			</nav>

CSS

.nav-menu-list {
	display: flex;
	list-style-type: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 25px 50px;
	padding: 0;
	margin: 0;
	font-size: 16px;
	color: #333;
	justify-content: flex-end;
}

.nest-box {
	position: relative;

	summary:hover {
		cursor: pointer;
		text-decoration: underline;
	}
}

.nest-box-list {
	position: absolute;
	top: 120%;
	display: flex;
	list-style-type: none;
	padding: 20px;
	gap: 20px 20px;
	background-color: #202121cc;
	color: #FFF;
	border-radius: 10px;
	z-index: 2;
	flex-direction: column;
	align-items: flex-start;
	font-size: 16px;
	width: max-content;
}

.all-inherit-link {
	color: inherit;
	text-decoration: none;

	&:active {
		color: inherit;
		text-decoration: underline;
	}

	&:visited {
		color: inherit;
	}

	&:hover {
		text-decoration: underline;
	}
}