상단메뉴 마우스 오버시 밑줄 표시
본문
위 이미지처럼 마우스 오버시 아래 밑줄을 표시 하려고 하는데요.
제가 아직 초보라.. 문제가 발생이 되네요.
실제로 마우스를 오버하게 되묜 메뉴의 높이가 밑줄 높이만큼 추가가 되어서 나타나네요..
높이가 커지는게 아니라.. 기존 메뉴 위에 밑줄만 표시되게 하려고 합니다
어디를 어떻게 수정하면 되는지...
알려 주세요 ㅠㅠㅠㅠ
아래는 관련 CSS 소스입니다
@charset "utf-8";
/* 공통 */
* {box-sizing: border-box;}
body {font-size:14px; font-family: "나눔고딕", "NanumGothic", "Malgun Gothic", "Gulim", "dotum" !important;}
a, a:hover, a:link, a:active {text-decoration: none; color: inherit;}
ul,li {list-style: none;margin: 0;padding: 0;}
#container {z-index:auto;}
.wrap {position: relative; width: 100%; margin: 0; box-sizing: border-box; }
/* 메뉴 */
.menu {font-size:17px;margin: 0 auto ; font-family: "나눔고딕", "NanumGothic", "Malgun Gothic", "Gulim", "dotum" !important;background: linear-gradient(-135deg, #1900d7, #00acd4) fixed;clear: both;border-top:1.5px solid #64FFE4;border-top:1.5px solid #64FFE4;}
.menu * {box-sizing: border-box;}
.menu .wrap {position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; }
.menu ul,.menu li {list-style: none;margin: 0;padding: 0px;}
.menu a,.menu a:hover,.menu a:link,.menu a:active {text-decoration: none; color: inherit;}
.lnb {position: relative;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#193968', endColorstr='#00acd4')";}
.lnb .lnb_depth1{width: 100%;text-align: center;}
.lnb .lnb_depth1 >li{display: inline-block;width: 12.4%;text-align: center;border-right:1px solid #64FFE4;border-left:1px solid #64FFE4}
.lnb .lnb_depth1 >li a{padding: 15px 0;display: inline-block;color: #fff;font-weight: 600;font-size: 1.1em;}
.lnb .lnb_depth1 >li a:hover {color: #f2e9d6;border-bottom:20px solid #64FFE4;width: 100%;}
.lnb .lnb_depth2 {display:none;position: absolute;top:77px;z-index:100;left: 0;width: 100%;background: #fff;border-bottom: 1px solid #ddd;font-size: 1em;}
.lnb:hover .lnb_depth2{display: block;}
.lnb .lnb_depth2 .wrap >ul {display: block;height: 306px;text-align: center;}
.lnb .lnb_depth2 .wrap >ul >li {display: inline-block;width: 12.4%;text-align: center;line-height: 2em;border-left: 1px dotted #ddd;padding: 0; box-sizing: border-box;-ms-filter: "box-sizing:border-box";height: 100%;vertical-align: top;}
.lnb .lnb_depth2 .wrap >ul >li:first-child {border-left:0;}
.lnb .lnb_depth2 .wrap >ul >li:nth-of-type(even) {background: #f0f0f0;}
.lnb .lnb_depth2 .wrap >ul >li ul li a {padding: 3px 0;display: block;box-sizing: border-box;-ms-filter: "box-sizing:border-box";}
.lnb .lnb_depth2 .wrap >ul >li a:hover {background: #0402A8;color: #fff;}
답변 2
소스하나하나 봐드린긴 어렵고..사이트 링크주시면 바로 확인가능해요~!
policets.co.kr 입니다. 확이 부탁 드립니다.
지금은 소스 확인하느라.. 2차 메뉴를 좀 아래로 내려 놓앗구요
밑줄도 크게 설정해 놧씁니다.
/extend/menu.extend.css
소스에서 21번째줄
.lnb .lnb_depth1 >li a:hover{border-bottom:20px solid #64FFE4}
이부분있는데 이거 20px를 2px로 변경하시고
동일한 파일 22번째줄에
.lnb .lnb_depth2{top:54px}로 변경하세요~
/extend/menu.extend.css
소스에서 21번째줄
.lnb .lnb_depth1 >li a:hover{border-bottom:20px solid #64FFE4}
이부분있는데 이거 20px를 2px로 변경하시고
동일한 파일 22번째줄에
.lnb .lnb_depth2{top:54px}로 변경하세요~
위 내용은 이미 해 본거구요..
문제가 있어서 높이를 높게 수정해서. 확인하고 있떤 겁니다 ㅠㅠ
.lnb .lnb_depth1 >li a:hover{border-bottom:20px solid #64FFE4}
이부분에 밑줄을 첨가 하면.. 메뉴 위에 밑줄이 그어지는게 아니라
위 수치만큼 높이가 추가되면서 밑줄이 그어져서 그부분을 수정을 바라는 것입니다
밑줄이 아래로 추가가 되는것이 아니라..
메뉴크기 높이 변동 없이.. 메뉴 위에 표시 되도록 하는 방법요
아 제가 질문의도를 잘못알앗네요 height값은 고정이고 하단밑줄만 발생하게 말씀이신거면 li에 오버시 2차카테고리 노출하게하고 li에 height값을 주고 a값에 display:block하시고 border-bottom:하시면 되요~
li 요소에 border 두껍게 하시면 안 되구요.
그 안에 밑줄용 span이나 div 요소 넣고
평상시엔 display:none 넣어서 안 보이고 하고,
hover일 때만 보이게 하시면 되세요.
그리고, 위치는 position 이용해서 설정하시고..
hover 일때 보이게 하고 있는데요.
보여질때 밑줄 크기만큼 아래로 추가가되서 보여져셔요.
추가 안되고 메뉴 높이는 그대로인 상태에서 밑줄만 추가 되게 하고 싶습니다.
그누보드 최신글 스킨에서 게시판 제목 타이틀 밑에 밑줄 만드는 소스 참고해 보세요.
그 방식을 hover일 때만 보이게 하면 되니까요.
