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 = $(".gnb>li>a");

gnbLiA.click(function () {
	$(".sub").removeClass("on");
	$(this).next().addClass("on");
});