드롭메뉴의 줄 간격 관련

드롭메뉴의 줄 간격 관련

QA

드롭메뉴의 줄 간격 관련

본문

2106177873_1544830579.9587.png

 

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

 

하위 메뉴의 글자가 한줄이면 테스트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

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

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

 

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

https://homzzang.com/b/css-95 margin 속성

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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,525 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT