CodePen Embed - CSS DropDown Menu


<div class="wrapper">
	<div class="contents">
		<div class="contents__inner">
<!-- 			<h1>【DEMO】CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ)</h1> -->
			
			<div class="mod__trg"><i></i>AAA</div>
			
			
			<nav>
				<ul class="menu">
					
					<li class="menu__none"><a href="#">Menu none</a></li>


					<li class="menu__multi">
						<a href="#" class="init-bottom">Menu multi level</a>
						<ul class="menu__second-level">
							<li>
								<a href="#" class="init-right">Child Menu</a>
								<ul class="menu__third-level">
									<li>
										<a href="#" class="init-right">Grandchild Menu</a>
										<ul class="menu__fourth-level">
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
										</ul>
									</li>
									<li><a href="#">Grandchild Menu</a></li>
									<li><a href="#">Grandchild Menu</a></li>
								</ul>
							</li>
							<li>
								<a href="#" class="init-right">Child Menu</a>
								<ul class="menu__third-level">
									<li><a href="#">Grandchild Menu</a></li>
									<li>
										<a href="#" class="init-right">Grandchild Menu</a>
										<ul class="menu__fourth-level">
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
										</ul>
									</li>
									<li><a href="#">Grandchild Menu</a></li>
								</ul>
							</li>
							<li>
								<a href="#" class="init-right">Child Menu</a>
								<ul class="menu__third-level">
									<li><a href="#">Grandchild Menu</a></li>
									<li><a href="#">Grandchild Menu</a></li>
									<li>
										<a href="#" class="init-right">Grandchild Menu</a>
										<ul class="menu__fourth-level">
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
											<li><a href="#">Great-Grandchild Menu</a></li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>


					<li class="menu__mega">
						<a href="#" class="init-bottom">Menu mega</a>
						<ul class="menu__second-level">
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
						</ul>
					</li>


					<li class="menu__single">
						<a href="#" class="init-bottom">Menu single</a>
						<ul class="menu__second-level">
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
							<li><a href="#">Child Menu</a></li>
						</ul>
					</li>


				</ul>
			</nav>
		</div>


		<!--  Hum		 -->
<!-- 		<div id="ham-menu">
			<ul>
				<li>メニュー1</li>
				<li>メニュー2</li>
				<li>メニュー3</li>
			</ul>
		</div>
		<div id="menu-background"></div>
 -->

		<br>

		<div class="footer">
			<h3>参照元</h3>
			<p><a href="http://theorthodoxworks.com/demo/201502/demo-drop-down-menu-multi-css.html">DropDown</a></p>
			<p><a href="https://q-az.net/hamburger-menu-only-css/">ハンバーガー</a></p>
		</div>

body {
	color: #000;
	font: 15px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	background-color: #f5f5f5;
	text-align: left;
}

a {
	text-decoration: none;
}


/*** base */

.wrapper {
	width: 100%;
	height: 100vh;
	text-align: center;
	font-size: 13px;
	background: #BED6E6;
}

.contents {
	width: 100%;
	height: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.contents__inner {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 50px 24px;
	color: #fff;
	h1 {
		margin-bottom: 30px;
		font-size: 20px;
		font-weight: bold;
	}
}


/*** menu */


/*-------------------------
カスタム
-------------------------*/

@media only screen and (max-width: 640px) {
	.menu {
		flex-direction: column;
		display: none;
		opacity: 0;
		transition: .5s;
		&.open {
			display: block;
			opacity: 1;
			transition: .5s;
		}
	}
	.mod__trg {
		width: 30px;
		height: 30px;
		display: block;
		position: absolute;
		right: 14px;
		top: 15px;
		background-color: #fff;
		border-radius: 5px;
		i {
			display: block;
			width: 20px;
			height: 2px;
			border-radius: 3px;
			background: #000;
			transition: background 0.5s;
			position: relative;
			left: 5px;
			top: 14px;
			&:before,
			&:after {
				content: "";
				display: block;
				width: 20px;
				height: 2px;
				border-radius: 3px;
				background: #000;
				position: absolute;
				transform: rotate(0deg);
				transition: all 0.3s !important;
			}
			&:before {
				transform: translateY(8px);
			}
			&:after {
				transform: translateY(-8px);
			}
		}
		&.is-open {
			i {
				background: #fff;
				&:after {
					transform: translateY(0px) rotate(-45deg);
				}
				&:before {
					transform: translateY(0px) rotate(45deg);
				}
			}
		}
	}
}

@keyframes show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.menu {
	display: none;
}

.menu.open {
	display: block;
	animation: show .3s linear 0s;
}

.menu {
	position: relative;
	width: 100%;
	height: 50px;
	max-width: 1000px;
	display: flex;
	margin: 0 auto;
	> li {
		flex: 1 1 auto;
		// float: left;
		// width: 25%;
		height: 50px;
		line-height: 50px;
		background: rgb(29, 33, 19);
		a {
			// display: block;
			color: #fff;
			&:hover {
				color: #999;
			}
		}
	}
}

.menu__none:hover,
.menu__multi:hover,
.menu__mega:hover,
.menu__single:hover {
	background: #072A24;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.menu__second-level li,
.menu__third-level li {
	border-top: 1px solid #111;
}

.menu__second-level li a:hover {
	background: #111;
}

.menu__third-level li a:hover {
	background: #2a1f1f;
}

.menu__fourth-level li a:hover {
	background: #1d0f0f;
}

.init-bottom:after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 0 15px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu {
	&:before {
		content: "";
		display: table;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
	*zoom: 1;
	> .menu__single {
		position: relative;
	}
}


/**
 * single menu
 */

.menu__single {
	.menu__second-level {
		position: absolute;
		top: 40px;
		width: 100%;
		background: #072A24;
		-webkit-transition: .2s ease;
		transition: .2s ease;
		visibility: hidden;
		opacity: 0;
	}
	&:hover > .menu__second-level {
		top: 50px;
		visibility: visible;
		opacity: 1;
	}
}


/**
 * multi menu
 */

.menu > .menu__multi {
	position: relative;
}

.menu__multi {
	.menu__second-level {
		position: absolute;
		top: 40px;
		width: 100%;
		background: #072A24;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		visibility: hidden;
		opacity: 0;
		z-index: 1;
	}
	&:hover .menu__second-level {
		top: 50px;
		visibility: visible;
		opacity: 1;
	}
	.menu__second-level li {
		position: relative;
		&:hover {
			background: #111;
		}
		.menu__third-level {
			position: absolute;
			top: -1px;
			left: 100%;
			width: 100%;
			background: #111;
			-webkit-transition: all .2s ease;
			transition: all .2s ease;
			visibility: hidden;
			opacity: 0;
		}
		&:hover .menu__third-level {
			visibility: visible;
			opacity: 1;
		}
		.menu__third-level li {
			position: relative;
			&:hover {
				background: #2a1f1f;
			}
			.menu__fourth-level {
				position: absolute;
				top: -1px;
				left: 100%;
				width: 100%;
				background: #2a1f1f;
				-webkit-transition: all .2s ease;
				transition: all .2s ease;
				visibility: hidden;
				opacity: 0;
			}
			&:hover .menu__fourth-level {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

.init-right:after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 0 15px;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/**
 * mega menu
 */

.menu__mega {
	.menu__second-level {
		position: absolute;
		top: 40px;
		left: 0;
		box-sizing: border-box;
		width: 100%;
		padding: 20px 2%;
		background: #072A24;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		visibility: hidden;
		opacity: 0;
		z-index: 1;
	}
	&:hover .menu__second-level {
		top: 50px;
		visibility: visible;
		opacity: 1;
	}
	.menu__second-level > li {
		float: left;
		width: 32%;
		border: none;
		&:nth-child(3n+2) {
			margin: 0 1%;
		}
	}
}


/* -------------------------
ハンバーガーメニュー部分 -------------------------*/

// #ham-menu {
// 	background-color: #fff;
// 	/*メニュー背景色*/
// 	box-sizing: border-box;
// 	height: 100%;
// 	padding: 10px 40px;
// 	/*メニュー内部上下左右余白*/
// 	position: fixed;
// 	right: -300px;
// 	/*メニュー横幅①と合わせる*/
// 	top: 0;
// 	transition: transform 0.3s linear 0s;
// 	/*0.3s は変化するのにかかる時間*/
// 	width: 300px;
// 	/*メニュー横幅①*/
// 	z-index: 1000;
// 	&::before {
// 		background-color: #fff;
// 		/*ボタン部分背景色*/
// 		border-radius: 0 0 0 10px;
// 		/*左下角丸*/
// 		color: #333;
// 		/*アイコン（フォント）色*/
// 		content: "≡";
// 		/*メニューアイコン*/
// 		display: block;
// 		font-size: 50px;
// 		/*アイコン（フォント）サイズ*/
// 		height: 50px;
// 		line-height: 50px;
// 		/*縦位置中央化*/
// 		position: absolute;
// 		right: 100%;
// 		text-align: center;
// 		top: 0;
// 		width: 50px;
// 	}
// }

/*メニューアイコン部分は疑似要素で*/


/*透過背景部分*/

// #menu-background {
// 	background-color: #333;
// 	/*黒背景部分背景色*/
// 	display: block;
// 	height: 100%;
// 	opacity: 0;
// 	position: fixed;
// 	right: 0;
// 	top: 0;
// 	transition: all 0.3s linear 0s;
// 	/*0.3s は変化するのにかかる時間*/
// 	width: 100%;
// 	z-index: -1;
// }

/*hover 時の処理*/

#ham-menu:hover {
	transform: translate(-300px);
	/*メニュー横幅①と合わせる*/
	+ #menu-background {
		opacity: 0.5;
		/*黒背景部分透過度*/
		z-index: 999;
	}
}

.footer {
	color: #999;
	a {
		color: #999;
	}
}

View Compiled

$(document).ready(function() {
	$(".mod__trg").click(function() {
		if ($(".menu").hasClass("open")) {
			$('.menu').removeClass("open");
			$(this).removeClass("is-open");
		} else {
			$('.menu').addClass("open");
			$(this).addClass("is-open");
		}
	});
});

This Pen is owned by Pistol on CodePen.

See more by @pistol on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js