<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">축제소개</a></li>
<ul class="sub_menu">
<li><a href="#">Festival 소개</a></li>
<li><a href="#">행사장 안내</a></li>
<li><a href="#">조직위원회</a></li>
</ul>
</ul>
<ul>
<li><a href="#">예약안내</a></li>
<ul class="sub_menu">
<li><a href="#">예약하기</a></li>
<li><a href="#">예약확인/취소</a></li>
<li><a href="#">단체예약문의</a></li>
</ul>
</ul>
<ul>
<li><a href="#">아티스트</a></li>
<ul class="sub_menu">
<li><a href="#">고릴라즈</a></li>
<li><a href="#">메이저 레이저</a></li>
<li><a href="#">아우스게인</a></li>
<li><a href="#">타임로드</a></li>
</ul>
</ul>
</nav>
</header>
</body>
</html>
header > nav{
display: flex;
}
header > nav > ul{
list-style: none;
}
header > nav > ul:hover .sub_menu{
display: block;
}
.sub_menu{
display: none;
}