<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0; padding: 0; list-style: none;
}
li{
border-bottom: 1px solid #ccc;
line-height: 50px;
}
.gnb > li{
background-color: dodgerblue;
color: #fff;
font-weight: bold;
}
.gnb > li a{
padding: 10px 20px;
display: block
}
.gnb li li{
background-color: #eaeaea;
color: #666;
padding: 10px 20px;
}
.sub-gnb{
display: none;
}
</style>
</head>
<body>
<ul class="gnb">
<li>
<a href="#">MENU1</a>
<ul class="sub-gnb">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
<li>
<a href="#">MENU2</a>
<ul class="sub-gnb">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
<li>
<a href="#">MENU3</a>
<ul class="sub-gnb">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
<li>
<a href="#">MENU4</a>
<ul class="sub-gnb">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
<li>
<a href="#">MENU5</a>
<ul class="sub-gnb">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(".gnb > li").on("click", function() {
$(".sub-gnb").stop().slideUp();
$(this).children(".sub-gnb").stop().slideToggle();
// $(this).siblings().children(".sub-gnb").slideUp();
})
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.