네비 상단

Question

안녕하세요 선생님:) 상단 네비 전체드롭다운에 사이사이 선들을 어떤방법으로 제거해야하나요? Document @charset "utf-8"; body{ background-color: #fff; color: #333; } a{ text-decoration: none; color: #333; } .container{ width: 1200px; margin: auto; } header{ height: 100px; position: relative; z-index: 1;}header>div{ height: 100px; /* border: 1px solid #000; /}.header-logo{ float: left; width: 200px; line-height: 130px;}.navi{ width: 600px; float: right;} .menu{ / border: 1px solid #000; / padding: 0; list-style: none;}.menu>li{ / border: 1px solid #000; / float: left; width: 25%; box-sizing: border-box; text-align: center; margin-top: 15px;}.menu>li>a{ border: 1px solid #000; display: block; padding: 5px; transition: 0.5s;}.menu>li>a:hover{ background-color: #000; color: #fff;}.sub-menu{ border: 1px solid #000; background-color: #fff; display: none;}.sub-menu>a{ display: block; padding: 5px; transition: 0.5s;}.sub-menu>a:hover{ background-color: #000; color: #fff;} .slide{ position: relative; height: 300px; width: 1200px; / border: 1px solid #000; / overflow: hidden;}.slide>div{ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 10s linear infinite;} @keyframes slide{ 0% {top: 0;} 30% {top: 0;} 35% {top: -300px;} 65% {top: -300px;} 70% {top: -600px;} 95% {top: -600px;} 100% {top: 0;}} .items{ overflow: hidden;}.items>div{ height: 200px; / border: 1px solid #000; / float: left; width: 400px; box-sizing: border-box;}.news{} .tab-inner{ width: 95%; margin: auto; padding: 6px;}.btn{}.btn>a{ border: 1px solid #000; display: inline-block; width: 120px; padding: 5px; border-radius: 5px 5px 0 0; background-color: #ddd; margin-right: -5px; border-bottom: none; margin-bottom: -1px;}.btn>a.actvie{ background-color: #fff;}.tabs{}.tabs>div{ border: 1px solid #000; height: 160px; padding: 0 10px;}.tab1{ }.tab1 a{ border-bottom: 1px solid #000; display: block; padding: 6px;}.tab1 a:last-child{ border-bottom: none;}.tab1 a b{ float: right; font-weight: normal;}.tab2{ display: none; text-align: center;}.tab2 img{ width: 100px; padding-top: 30px;} .banner{}.shortcut{} footer{}footer>div{ height: 100px; / border: 1px solid #000; / float: left; box-sizing: border-box;}.footer-logo{ width: 200px; line-height: 130px;}.copy{ width: 800px; line-height: 100px; text-align: center;}.sns{ width: 200px; line-height: 140px; text-align: center;} .modal{ background-color: #000; position: absolute; / 너비값 잃음 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: none;}.modal-con{ background-color: #fff; width: 400px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 15px;}.modal-con h3{ background-color: #000; color: #fff; padding: 5px;}.modal-con p{ line-height: 1.6em;}.modal-con a{ border: 1px solid #000; padding: 5px; float: right;} $('.menu>li').mouseover(function(){ $('.sub-menu').stop().slideDown() }) $('.menu>li').mouseout(function(){ $('.sub-menu').stop().slideUp()}) $('.btn>a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.btn>a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('actvie') $(this).siblings().removeClass('actvie')}) $('.open-modal').click(function(){ $('.modal').fadeIn()}) $('.close-madal').click(function(){ $('.modal').fadeOut()})

codingworks · Answer

코드가 주석처리되고 해서 제가 확인이 안됩니다. 복사하실 때 비주얼스튜디오코드 화면에서 그냥 복사해서 붙여넣기 하시면 아래처럼 붙여넣기 되서 확인하기 좋습니다. 그리고 CSS 가지고 오면 주석처리 이상하게 되어 있어요. 그리고 제이쿼리 엔터 안치고 지금처럼 올리시면 오류나서 확인하기 어렵습니다. 아래 수강생 분처럼 올리셔야 제가 확인할 수 있어요. https://www.inflearn.com/questions/757525/sub-menu%EB%A5%BC-abc%ED%98%95%EC%9D%98-%EC%9C%84%EC%B9%98%EC%97%90-%EB%86%93%EA%B3%A0-css%EB%A5%BC-%EC%9E%91%EC%84%B1%ED%96%88%EC%8A%B5%EB%8B%88%EB%8B%A4