js+jq

by qwerew0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<ul class="gnb">
	<li><a href="#">회사소개</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">제품소개</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">커뮤니티</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
	<li><a href="#">다운로드</a>
		<ul class="sub">
			<li><a href="#">submenu1</a></li>
			<li><a href="#">submenu2</a></li>
			<li><a href="#">submenu3</a></li>
			<li><a href="#">submenu4</a></li>
		</ul>
	</li>
</ul>

CSS

*{margin:0;padding:0;}
body{font-size:13px;}

a{text-decoration:none;}
ul,li{list-style:none;}
.gnb{ width:200px; margin:20px auto 0;
	text-align:center;text-indent:10px;
}
.gnb>li>a{
	display:block;
	height:36px;background:#390; cursor:pointer;
	line-height:3em;border-top:1px dotted #fff;
	color:#fff;
}
.gnb .sub li{
	height:36px;line-height:3em;background:#cf9;
}
.gnb .sub li a{
	display:block; width:100%; color:#222;
}
.gnb .sub li:hover{background:#cf0;}
.sub {
	transition: height 0.5s;
	overflow: hidden;
	height: 0px;
}

.sub.on {
	height: 110px;
}

JavaScript

let gnbLiA = document.querySelectorAll(".gnb>li>a");
const aH = document.querySelector(".sub a").clientHeight - 3;
for (var i = 0; i < gnbLiA.length; i++) {
	var item1 = gnbLiA[i];
	item1.addEventListener("click", function () {
		var allSub = document.querySelectorAll(".sub");
		for (var j = 0; j < allSub.length; j++) {
			var item2 = allSub[j];
			item2.style.height = 0;
			this.nextElementSibling.style.height = aH * allSub.length + "px";
		}
	});
}