상단메뉴 마우스 오버시 밑줄 표시
본문
위 이미지처럼 마우스 오버시 아래 밑줄을 표시 하려고 하는데요.
제가 아직 초보라.. 문제가 발생이 되네요.
실제로 마우스를 오버하게 되묜 메뉴의 높이가 밑줄 높이만큼 추가가 되어서 나타나네요..
높이가 커지는게 아니라.. 기존 메뉴 위에 밑줄만 표시되게 하려고 합니다
어디를 어떻게 수정하면 되는지...
알려 주세요 ㅠㅠㅠㅠ
아래는 관련 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
소스하나하나 봐드린긴 어렵고..사이트 링크주시면 바로 확인가능해요~!
li 요소에 border 두껍게 하시면 안 되구요.
그 안에 밑줄용 span이나 div 요소 넣고
평상시엔 display:none 넣어서 안 보이고 하고,
hover일 때만 보이게 하시면 되세요.
그리고, 위치는 position 이용해서 설정하시고..
답변을 작성하시기 전에 로그인 해주세요.