-
마우스 호버시 서브메뉴 나오기프론트엔드/프론트엔드 이슈 2024. 3. 20. 17:05728x90
<!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