테스트 사이트 - 개발 중인 베타 버전입니다

드롭메뉴의 줄 간격 관련 채택완료

꿈의여행 6년 전 조회 4,224

 

위 그림처럼 홈페이지 상단에 메뉴가 있고, 마우스를 가져다대면 하위메뉴가 나오는 형식입니다.

 

하위 메뉴의 글자가 한줄이면 테스트1처럼 나오고, 2줄 이상이면 테스트2처럼 나옵니다.

 

테스트2의 줄 간격이 길어서 테스트3처럼 간격을 줄이고 싶습니다.

 

CSS에서 depth2의 line-height를 수정하면 되는줄 알았는데 줄 간격이 줄어들지 않고 하위 메뉴의 세로길이가 줄어듭니다.

 

관련된 질문을 검색해봐도 답을 못찾겠습니다. 답변 부탁드립니다.

 

.header .depth1{display:inline-block; text-align:center; margin-top:28px;} .header .depth1 > li{display:inline-block; margin-left:70px; position:relative; padding-bottom:23px;} .header .depth1 > li:first-child{margin-left:0;} .header .depth1 > li > a{font-size:16px; line-height:24px; font-weight:bold;padding-bottom:8px;} .header .depth1 > li > a:hover/* , .header .depth1 > li > a.on */{ border-bottom:3px solid #366dbe;} .header .depth1 > li.gnb_company > .depth2{left:-60px;} .header .depth1 > li > .depth2{position:absolute; left:-25px; top:55px; width:135px; text-align:left; box-shadow:5px 5px 4px 0 rgba(0,0,0,0.15); border-bottom:1px solid #366dbe;  z-index:1; display:none;} .header .depth1 > li > .depth2 > li{border-top:1px solid #264c85; position:relative; box-sizing:border-box; border-left:1px solid #366dbe; border-right:1px solid #366dbe;} .header .depth1 > li > .depth2 > li.include{border-right:0;} .header .depth1 > li > .depth2 > li:first-child{border-top:1px solid #366dbe;} .header .depth1 > li > .depth2 > li > a{color:#fff; font-size:14px; display:block; width:100%; height:100%; line-height:40px; box-sizing:border-box; padding-left:20px; background:#366dbe;} .header .depth1 > li > .depth2 > li > a:hover, .header .depth1 > li > .depth2 > li a.on{background:#fff; color:#263238;} .header .depth1 > li > .depth2 > li.go_submain{display:block;} .header .depth1 > li > .depth2 > li.go_submain :hover{background:#00a6ff; color:#fff;} .header .depth1 > li > .depth2 > li.include > a{background:#366dbe url('../images/gnb/bu_2depth.png') no-repeat 165px 50%;} .header .depth1 > li > .depth2 > li.include > a:hover, .header .depth1 > li > .depth2 > li.include a.on, .header .depth1 > li > .depth2 > li.over a{background:#fff url('../images/gnb/bu_2depth_on.png') no-repeat 165px 50%; color:#263238;} .header .depth1 > li > .depth2 > li > .depth3{position:absolute; left:-1px; top:-1px; margin-left:100%; width:190px; background:#fff url('../images/gnb/bg_3depth_left.gif') no-repeat 0 1px; box-shadow:5px 5px 4px 0 rgba(0,0,0,0.15); padding:5px 0;  box-sizing:border-box; border:1px solid #366dbe; border-left-width:0; display:none;} .header .depth1 > li > .depth2 > li > .depth3 li{padding-left:20px; margin-top:0; background:url('../images/gnb/bg_3depth_line.gif') no-repeat 10px 17px;} .header .depth1 > li > .depth2 > li > .depth3 li:first-child{margin-top:0;} .header .depth1 > li > .depth2 > li > .depth3 li a{font-size:14px; color:#263238; line-height:22px; display:block; height:100%; box-sizing:border-box; padding:6px 0; background:none;} .header .depth1 > li > .depth2 > li > .depth3 li a:hover{text-decoration:underline; color:#366dbe;}

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
티로그
6년 전

height:**px; line-height:1em; display:table-cell; vertical-align:middle; 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

꿈의여행
6년 전
바로 해결되었습니다! 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
6년 전

아래 애들 참고해 작업해 보세요.

 

https://homzzang.com/b/css-251 선택자위치 알아내기

https://homzzang.com/b/css-95" rel="nofollow" target="_blank">https://homzzang.com/b/css-95 margin 속성

https://homzzang.com/b/css-108 position 속성

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

꿈의여행
6년 전
감사합니다! 기존에 몰랐던 정보를 알게되었네요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인