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

$('.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; }

.close-modal 관련 질문

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

선생님 여쭤볼 것이 있습니다.

그리고 혹시 푸터 부분에 background-color 를 주고 footer-logo img 태그를 만들어서 크기를 줄이고 margin-left 를 줘서 오른쪽으로 조금 이동해봤는데 이렇게 해도 괜찮을까요? (사진)

w3c 표준 검사 결과...

/* Navigation */ $('.menu li').mouseenter(function(){ $('.sub-menu, .sub-back').stop().slideDown() }) $('.menu li').mouseleave(function(){ $('.sub-menu, .sub-back').stop().slideUp() })

w3c 표준 검사 결과...

@charset "utf-8"; body { margin: auto; background-color: #ffffff; color: #333333; font-size: 15px; } a { color: #333333; text-decoration: none; } .container {} .header-inner { /* border: 1px solid red; */ background-color: #eee; } header { height: 100px; width: 1200px; margin: auto; position: relative; z-index: 1; } header > div { /* border: 1px solid green; */ height: 100px; } .header-logo { width: 200px; float: left; line-height: 130px; } .navi { width: 600px; float: right; margin-right: 20px; } .content-inner {} .slide { width: 1200px; margin: auto; } .slide > div { border: 1px solid red; height: 300px; } .items { width: 1200px; margin: auto; overflow: hidden; margin-top: 20px; } .items > div { /* border: 1px solid red; */ height: 200px; float: left; box-sizing: border-box; } .news { width: 425px; } .gallery { width: 425px; } .banner { width: 350px; } .footer-inner { /* border: 1px solid red; */ background-color: #eee; } footer { width: 1200px; margin: auto; overflow: hidden; } footer > div { /* border: 1px solid rebeccapurple; */ height: 100px; float: left; box-sizing: border-box; text-align: center; } .copyright { width: 1000px; } .copyright > div:nth-child(1) { padding-top: 17px; box-sizing: border-box; } .copyright > div:nth-child(1) a:hover{ text-decoration: underline; } .copyright > div { /* border: 1px solid black; */ height: 50px; } .family-site { width: 200px; line-height: 100px; } /* Slide */ .slide { position: relative; width: 1200px; height: 300px; overflow: hidden; } .slide > div { border: 1px solid black; width: 3600px; font-size: 0; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } @keyframes slide { 0% { left: 0; } 30% { left: 0; } 35% { left: -1200px; } 65% { left: -1200px; } 70% { left: -2400px; } 95% { left: -2400px; } 100% { left: 0; } } /* news $ gallery */ .tab-inner { width: 95%; margin: auto; } .btn {} .btn span { border: 1px solid black; display: inline-block; width: 100px; text-align: center; padding: 5px; border-radius: 5px 5px 0 0; border-bottom: none; margin-bottom: -1px; background-color: #ffffff; } .tab1, .tab2 { border: 1px solid black; padding: 0 13px; height: 160px; } .tab1 a { display: block; padding: 5px; border-bottom: 1px solid black; } .tab1 a:last-child {border-bottom: none;} .tab1 a b { float: right; font-weight: normal; } .tab2 { text-align: center; } .tab2 img { width: 120px; padding-top: 25px; } .banner img { width: 96%; } /* Navigation */ .menu { list-style: none; padding: 0; padding-top: 55px; } .menu li { /* border: 1px solid blue; */ float: left; width: 25%; box-sizing: border-box; text-align: center; } .menu li > a { border: 1px solid black; display: block; padding: 5px; transition: 0.5s; } .menu li:hover > a { background-color: black; color: #ffffff; } .sub-menu { border: 1px solid black; /* background-color: #ffffff; */ display: none; } .sub-menu > a { display: block; padding: 5px; color: #ffffff; transition: 0.5s; } .sub-menu > a:hover { background-color: #ffffff; color: black; } .sub-back { width: 1200px; height: 140px; background-color: black; position: absolute; left: 0; top: 100%; z-index: -1; display: none; }

w3c 표준 검사 결과...

산업대학교 (사진) 대학소개 총장인사말 학교소개 홍보관 캠퍼스안내 입학안내 수시모집 정시모집 편입학 재외국민 정보서비스 대학정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 (사진) (사진) (사진) 공지사항 산업대학교 동문회장배 자선골프대회2016-09-12 개교 100주년 기념 야외 오페라 초청2016-09-10 동문회장 및 운영위원장 후보자 추천2016-09-09 진행위원회(정회원) 선발 결과2016-09-07 산업대학교 동문회 개최일 변경2016-08-30 갤러리 (사진) (사진) (사진) (사진) 법적고지 개인정보취급방침 개인정보처리방침 상호명 : 산업대학교 대표자 : 송성훈 개인정보관리책임자 : 김보미 대리 사업장주소 : 서울특별시 중구 개항로 49 family-site 산업대학교 정보통신부 과학기술연구원