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

2019-02-10 (일) 21:03:09 3,008

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개 / 댓글 1개

2019-02-10 (일) 22:44:40

float:left

.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의 디스플레이 속성을 위와같이 다르게 주셔야 될 듯 합니다

2105599670_1549801592.3909.png

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

뭐가 문제인 건지...

답변에 대한 댓글 1개

적어드린 소스를 별도의 클래스로 정의 후, 해당 요소에 추가해도 됩니다.
물론, 스타일 정의는 기존 소스보다 나중에 위치하도록....

.hz { display:block;}



<li class='hz'>

아래 사항 체크해 보세요.

해당 요소의 너비를 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 ;
}

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