쇼핑몰 스타일 오류
관련링크
본문
theme/사용 테마/skin/shop/basic/style.css
/* aside:gnb */
#gnb {margin:0 0 5px;padding:0 0 10px;background:#333949;position:relative;min-height:425px}
#gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb button{width:100%;border:0;border-bottom:1px solid #2b313f;background:none;text-align:left;color:#fff;padding:0 20px;height:40px;font-weight:bold;font-size:1.167em}
.gnb_1dli {; word-wrap: break-word;}
.gnb_1dli_on {color:#fff;text-decoration:none}
.gnb_1da {display:block;padding:0 20px;line-height:40px;color:#ccc;font-weight:bold;text-decoration:none;font-size:1.167em}
.gnb_1dam {background:url('img/gnb_bg.png') center right no-repeat}
.gnb_1dli_on .gnb_1da {background-color:#2b313f;color:#fff;text-decoration:none}
.gnb_1dli_on .gnb_1dam {color:#fff;text-decoration:none}
.gnb_2dul {display:none;z-index:1000;position:absolute;border:1px solid #787f89;height:100%;padding:10px}
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:block;top:0;left:215px;width:200px;background:#fff}
.gnb_2da {display:none}
.gnb_1dli_over .gnb_2da {display:block;padding:5px 10px;line-height:20px;font-size:1.083em}
.gnb_2da:focus, .gnb_2da:hover {text-decoration:none;color:#be334a}
하위 분류가 있는 경우와 없는 경우가 마우스 오버를 했을 때 저렇게 다르네요.
순서를 바꾸어도 동일하고... 원인을 모르겠습니다.
SIR의 '사용자 데모'에서는 이런 현상이 없네요.
.gnb_1dli_on .gnb_1da {background-color:#ff0000;color:#fff;text-decoration:none}
알아보기 쉽게 색상만 바꾸었습니다.
여기에 'width:215px'를 삽입하면 해결이 되기는 합니다만...
답변 2
원인은 그게 아니었고,
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:block;top:0;left:215px;width:200px;background:#fff}
여기서 블럭으로 추가되서 나오는것때문에
그렇게 보이는것입니다.
left:215px; 라고 된영역이 붉은라인이 동일하게 오버되서 있습니다.
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:block;top:0;left:215px;width:200px;background:#fff}
에서 display:none 으로 해보시면 확인가능합니다.
결국 위에서 width:215px를 주시는게 맞는거죠
아래처럼 수정해보세요.
.gnb_1dli { word-wrap: break-word; width:215px; }
답변을 작성하시기 전에 로그인 해주세요.
