ヘッダーなどに追加するドロップダウンメニューのソースコードをご紹介！

<div class="dropdown01">
	<ul class="level01">
		<li>
			<a href="#">メニュー1</a>
		</li>
		<li>
			<a href="#">メニュー2</a>
		</li>
		<li class="has-child icon-down">
			<span>メニュー3</span>
			<ul class="level02">
				<li>
					<a href="#">メニュー3-1</a>
				</li>
				<li>
					<a href="#">メニュー3-2</a>
				</li>
				<li>
					<a href="#">メニュー3-3</a>
				</li>
				<li>
					<a href="#">メニュー3-4</a>
				</li>
				<li>
					<a href="#">メニュー3-5</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">メニュー4</a>
		</li>
		<li>
			<a href="#">メニュー5</a>
		</li>
		<li class="has-child icon-down">
			<span>メニュー6</span>
			<ul class="level02">
				<li>
					<a href="#">メニュー6-1</a>
				</li>
				<li>
					<a href="#">メニュー6-2</a>
				</li>
				<li>
					<a href="#">メニュー6-3</a>
				</li>
				<li>
					<a href="#">メニュー6-4</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

.icon-down {
    position: relative;
}
.icon-down::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 15px;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translate(0%,-65%) rotate(135deg);
}
.has-child {
    position: relative;
}
.has-child > .level02 {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    white-space: nowrap;
}
.dropdown01 .has-child ul li a {
    display: block;
}
.dropdown01 .level02 {
    background-color: #fff;
}
@media screen and (min-width: 992px) {
    .pc {
        display: block;
    }
    .dropdown01 .level01 {
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .dropdown01 ul li:hover span,
    .dropdown01 ul a:hover,
    .dropdown01 ul > li:hover::before {
        color: #094;
    }
    .dropdown01 .has-child .level02 {
        position: absolute;
        top: 30px;
        left: 0;
        min-width: 150px;
        background-color: #fff;
        z-index: 1;
        border: 2px solid #094;
    }
    .dropdown01 .has-child:hover > .level02 {
        opacity: 1;
        visibility: visible;
    }
    .dropdown01 .has-child ul li a {
        padding: 12px;
    }
    .dropdown01 .has-child ul li:not(:first-child) {
        border-top: 2px solid #094;
    }
    .dropdown01 .icon-down::before {
        top: 50%;
        right: -15px;
    }
}
@media screen and (max-width: 991px) {
    .pc {
        display: none !important;
    }
    .dropdown01 {
        background-color: #f0f0f1;
    }
    .dropdown01 .has-child .level02 {
        height: 0;
        transform: scaleY(0);
        transform-origin: top left;
    }
    .dropdown01 ul li a,
    .dropdown01 ul li span {
        display: block;
        border-bottom: 1px solid currentColor;
    }
    .dropdown01 .level01 a,
    .dropdown01 .level01 span {
        padding: 10px 15px;
    }
    .dropdown01 .level02 a,
    .dropdown01 .level02 span {
        padding: 10px 15px 10px 30px;
    }
    .dropdown01 .level02
    .dropdown01 ul li:last-child > a,
    .dropdown01 ul li:last-child > span {
        border-bottom: 0
    }
    .dropdown01 .has-child.open .level02 {
        height: auto;
        background-color: #bababa;
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }
}

document.querySelectorAll('.has-child').forEach(function(element) {
	element.addEventListener('click', function() {
		element.classList.toggle('open');
	});
});