하위 카테고리만 세로로 정렬하려면?

하위 카테고리만 세로로 정렬하려면?

QA

하위 카테고리만 세로로 정렬하려면?

답변 4

본문

2105599670_1549800003.6641.png

티스토리 스킨 수정 중인데

마우스오버로 세로로 정렬된 하위 카테고리를 보이게끔 만들고 싶습니다.

 

일기

여행

투자

 

이렇게 나오게요ㅠㅠ

혹시 아시는 분 댓글 부탁드리겠습니다..!

일단 제가 쓴 건 아래와 같습니당

 

/* category */
.category {
    display:none;
    text-align:center;
    line-height:40px;
    clear:both;
    overflow:hidden;
    margin-top:5px;
    font-weight:500;
}
.category ul, .category li {
    margin:0;
    padding:0;
  display:inline-block;
    list-style-type: none ;
}
/* 분류전체보기 없애기 */
.category > ul > li > a, .category ul li ul li ul {
    display:none;
}
/*상위카테고리*/
.category a {
    padding:4px 6px;
    margin:0 4px;
    color:#000;
    font-weight:bold;
    width:70px; 

}
/* 상위카테고리 마우스오버시 바뀌는 부분(스샷에서 핑크색배경) */
.category a:hover {
    text-decoration:line-through;
    font-style:italic;
    color:red;
}

/* 하위카테고리불러오기 */
.category ul li ul li:hover ul { 
    display:block; 
    position:absolute; 
}
.category ul li ul li {
    float:inherit;
}
.category ul li ul li li {
    clear:both;
}

/* 상위카테 마우스오버시 나타나는 하위카테고리 영역 꾸미는곳 */
.category ul li ul li ul {
    border:1px solid #666;
    background-color:#fff;
    
}
 /* 하위카테고리 마우스오버시 바뀌는 부분(스샷에서 회색배경) */
.category ul li ul li ul li:hover {
    background-color:#eee;
}

 

이 질문에 댓글 쓰기 :

답변 4

.category ul {
    margin:0;
    padding:0;
    display:inline-block;
    list-style-type: none ;
}

.category li {
    margin:0;
    padding:0;
    display:block;
    list-style-type: none ;
}

li와 ul의 디스플레이 속성을 위와같이 다르게 주셔야 될 듯 합니다

아래 사항 체크해 보세요.

 

해당 요소의 너비를 100% 설정

해당 요소의 flaot:left 있으면 제거

해당 요소에 display:block 속성 부여

 

해당 요소 선택자는 아래 좌표 참고해 찾으세요.

https://homzzang.com/b/css-251

 

 

PS.

위 소스에서 의심되는 부분은 아래 소스네요.

 

.category ul, .category li {
    margin:0;
    padding:0;
    display:inline-block; -----> display:block;
    list-style-type: none ;
}

 

2105599670_1549801592.3909.png

신비님 말씀하신대로 해보았는데 메인카테고리까지 세로로 정렬돼요ㅠㅠ

뭐가 문제인 건지...

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 15
© SIRSOFT
현재 페이지 제일 처음으로