왜 레이아웃이 다 무너질까요 ㅜㅜㅜ

$('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })

왜 레이아웃이 다 무너질까요 ㅜㅜㅜ

@charset "utf-8"; body { margin: 0; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container { /* border: 1px solid red; */ width: 1000px; } .container > div { /* border: 1px solid green; */ height: 600px; float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} header > div {} .header-logo { /* border: 1px solid red; */ height: 100px; line-height: 130px; } .navi { /* border: 1px solid red; */ height: 400px; } .slide {} .slide > div { /* border: 1px solid red; */ height: 350px; } .items { overflow: hidden; margin-top: 10px; } .items > div { /* border: 1px solid green; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } .shortcut { width: 200px; } footer { overflow: hidden; } footer > div { /* border: 1px solid green; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright { width: 600px; text-align: center; padding-top: 25px; } /* .copyright:nth-child(1) { padding-top: -50px; box-sizing: border-box; } .copyright:nth-child(1) a:hover { text-decoration: underline; } */ .sns { width: 200px; } .sns > div { /* border: 1px solid black; */ height: 50px; box-sizing: border-box; } .sns > div:nth-child(1) { padding-top: 10px; } .sns > div:nth-child(2) { padding-top: 10px; } /* Slide */ .slide { position: relative; font-size: 0; } .slide > div {} .slide > div a { position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1) { animation-delay: 0s; } .slide > div a:nth-child(2) { animation-delay: 3.5s; } .slide > div a:nth-child(3) { animation-delay: 7s; } @keyframes slide { 0% { opacity: 0; visibility: hidden; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* Navigation */ .menu { list-style: none; padding: 0; width: 95%; margin: auto; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.3s; } .menu li:hover > a { background-color: black; color: #ffffff; } .sub-menu { border: 1px solid black; display: none; position: absolute; background-color: black; width: 100%; left: 100%; top: 0; z-index: 10; } .sub-menu a { display: block; padding: 5px; transition: 0.3s; color: #ffffff; } .sub-menu a:hover { background-color: #ffffff; color: black; } /* modal */ /* .modal { background-color: rgba(0, 0, 0, 0.302); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .modal-content { width: 350px; background-color: #ffffff; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.605); overflow: hidden; } .close-modal { float: right; border: 1px solid black; padding: 5px 10px; } */ /* tab */ .tab-inner {} .btn {} .btn span {} .tab1 {} .tab1 a { display: block; } .tab1 a > b { float: right; } .tab2 { text-align: center; } .tab2 img { width: 90px; display: block; float: left; }

왜 레이아웃이 다 무너질까요 ㅜㅜㅜ

부여 가을연꽃축제 (사진) 축제소개 초대의 글 축제개요 축제연혁 오시는길 행사안내 셔틀버스안내 행사안내 행사일정 소공연장 홍보마당 축제소식 보도자료 음식레시피 참여마당 참가후기 연꽃갤러리 포토갤러리 (사진) (사진) (사진) 공지사항 운영위원장 후보자 추천을 받...2020.01.09 홈커밍데이 진행위원회 결과... 2020.01.07 카드결제 무이자 이벤트 한시...2019.12.31 보안강화 시스템 작업 안내...2019.12.20 부여 가을연꽃축제 10주년 콘...2019.12.20 갤러리 (사진) (사진) (사진) (사진) 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 (사진) (사진) (사진) Family-site 여주군청 홈페이지 한국관광공사 여행자보험가입 부여 가을연꽃축제 팸투어 모집 예비 청년상인들을 위해 진행하는 부여에서 청춘의 미래를 디자인하다. 청년창업人부여 팸투어가 12월 05일 토요일 충청남도 부여에서 진행됩니다. 팸투어는 전액 무료로 진행되며 참가비 없습니다. 이번 팸투어에서는 부여군상권활성화재단의 청년상인 육성프로젝트를 실제로 견학하며 확인해 보실 수 있는 좋은 기회이니 창업을 희망하는 많은 청년 분들의 관심 부탁드립니다. 온라인 및 전화 또는 메일 등으로 사전 참가신청하실 수 있습니다! 닫기 -->

.close-modal 관련 질문

$('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })

.close-modal 관련 질문

@charset "utf-8"; body { margin: 0; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container { /* border: 1px solid red; */ width: 1000px; } .container > div { /* border: 1px solid green; */ height: 600px; float: left; box-sizing: border-box; } .left { width: 200px; } .right { width: 800px; } header {} header > div {} .header-logo { /* border: 1px solid red; */ height: 100px; line-height: 130px; } .navi { /* border: 1px solid red; */ height: 400px; } .slide {} .slide > div { /* border: 1px solid red; */ height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid green; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } .shortcut { width: 200px; } footer { overflow: hidden; } footer > div { /* border: 1px solid green; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright { width: 600px; text-align: center; padding-top: 25px; } /* .copyright:nth-child(1) { padding-top: -50px; box-sizing: border-box; } .copyright:nth-child(1) a:hover { text-decoration: underline; } */ .sns { width: 200px; } .sns > div { /* border: 1px solid black; */ height: 50px; box-sizing: border-box; } .sns > div:nth-child(1) { padding-top: 10px; } .sns > div:nth-child(2) { padding-top: 10px; } /* Slide */ .slide { position: relative; font-size: 0; } .slide > div {} .slide > div a { position: absolute; top: 0; left: 0; opacity: 0; animation: slide 10s linear infinite; } .slide > div a:nth-child(1) { animation-delay: 0s; } .slide > div a:nth-child(2) { animation-delay: 3.5s; } .slide > div a:nth-child(3) { animation-delay: 7s; } @keyframes slide { 0% { opacity: 0; visibility: hidden; } 5% { opacity: 1; } 35% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } } /* Navigation */ .menu { list-style: none; padding: 0; width: 95%; margin: auto; position: relative; } .menu li { text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.3s; } .menu li:hover > a { background-color: black; color: #ffffff; } .sub-menu { border: 1px solid black; display: none; position: absolute; background-color: black; width: 100%; left: 100%; top: 0; z-index: 10; } .sub-menu a { display: block; padding: 5px; transition: 0.3s; color: #ffffff; } .sub-menu a:hover { background-color: #ffffff; color: black; } /* modal */ .modal { background-color: rgba(0, 0, 0, 0.302); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; } .modal-content { width: 350px; background-color: #ffffff; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.605); } .close-modal { float: right; border: 1px solid black; padding: 5px 10px; }