상단메뉴 마우스 오버시 밑줄 표시 채택완료
은빛여전사
7년 전
조회 4,181


위 이미지처럼 마우스 오버시 아래 밑줄을 표시 하려고 하는데요.
제가 아직 초보라.. 문제가 발생이 되네요.
실제로 마우스를 오버하게 되묜 메뉴의 높이가 밑줄 높이만큼 추가가 되어서 나타나네요..
높이가 커지는게 아니라.. 기존 메뉴 위에 밑줄만 표시되게 하려고 합니다
어디를 어떻게 수정하면 되는지...
알려 주세요 ㅠㅠㅠㅠ
아래는 관련 CSS 소스입니다
</p>
<p>@charset "utf-8";</p>
<p>/* 공통 */
* {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; }</p>
<p>/* 메뉴 */
.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;}</p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 5개
�
은빛여전사
7년 전
i
ilruo
7년 전
/extend/menu.extend.css
소스에서 21번째줄
.lnb .lnb_depth1 >li a:hover{border-bottom:20px solid #64FFE4}
이부분있는데 이거 20px를 2px로 변경하시고
동일한 파일 22번째줄에
.lnb .lnb_depth2{top:54px}로 변경하세요~
소스에서 21번째줄
.lnb .lnb_depth1 >li a:hover{border-bottom:20px solid #64FFE4}
이부분있는데 이거 20px를 2px로 변경하시고
동일한 파일 22번째줄에
.lnb .lnb_depth2{top:54px}로 변경하세요~
�
은빛여전사
7년 전
/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}
이부분에 밑줄을 첨가 하면.. 메뉴 위에 밑줄이 그어지는게 아니라
위 수치만큼 높이가 추가되면서 밑줄이 그어져서 그부분을 수정을 바라는 것입니다
소스에서 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}
이부분에 밑줄을 첨가 하면.. 메뉴 위에 밑줄이 그어지는게 아니라
위 수치만큼 높이가 추가되면서 밑줄이 그어져서 그부분을 수정을 바라는 것입니다
�
은빛여전사
7년 전
밑줄이 아래로 추가가 되는것이 아니라..
메뉴크기 높이 변동 없이.. 메뉴 위에 표시 되도록 하는 방법요
메뉴크기 높이 변동 없이.. 메뉴 위에 표시 되도록 하는 방법요
i
ilruo
7년 전
아 제가 질문의도를 잘못알앗네요 height값은 고정이고 하단밑줄만 발생하게 말씀이신거면 li에 오버시 2차카테고리 노출하게하고 li에 height값을 주고 a값에 display:block하시고 border-bottom:하시면 되요~
댓글을 작성하려면 로그인이 필요합니다.
sinbi
Expert
7년 전
li 요소에 border 두껍게 하시면 안 되구요.
그 안에 밑줄용 span이나 div 요소 넣고
평상시엔 display:none 넣어서 안 보이고 하고,
hover일 때만 보이게 하시면 되세요.
그리고, 위치는 position 이용해서 설정하시고..
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
은빛여전사
7년 전
hover 일때 보이게 하고 있는데요.
보여질때 밑줄 크기만큼 아래로 추가가되서 보여져셔요.
추가 안되고 메뉴 높이는 그대로인 상태에서 밑줄만 추가 되게 하고 싶습니다.
보여질때 밑줄 크기만큼 아래로 추가가되서 보여져셔요.
추가 안되고 메뉴 높이는 그대로인 상태에서 밑줄만 추가 되게 하고 싶습니다.
s
sinbi
7년 전
그누보드 최신글 스킨에서 게시판 제목 타이틀 밑에 밑줄 만드는 소스 참고해 보세요.
그 방식을 hover일 때만 보이게 하면 되니까요.
그 방식을 hover일 때만 보이게 하면 되니까요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
지금은 소스 확인하느라.. 2차 메뉴를 좀 아래로 내려 놓앗구요
밑줄도 크게 설정해 놧씁니다.