728x90
<!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;
}728x90
'프론트엔드 > 프론트엔드 이슈' 카테고리의 다른 글
| 컴포넌트 리렌더링과 state 상태 (.feat 클린업) (0) | 2024.05.29 |
|---|---|
| API 요청 함수 (0) | 2024.05.20 |
| 환경변수를 영구적으로 설정할때 setx path 를 cmd 창에서 입력했는데 안되는 경우 (1) | 2024.01.22 |
| 텍스트에 말줄임 적용하기 (1) | 2024.01.07 |
| 바이너리 데이터를 base64 string 으로 변환해서 이미지 보여주기 (1) | 2023.10.23 |