하위 카테고리만 세로로 정렬하려면?
본문
티스토리 스킨 수정 중인데
마우스오버로 세로로 정렬된 하위 카테고리를 보이게끔 만들고 싶습니다.
일기
여행
투자
이렇게 나오게요ㅠㅠ
혹시 아시는 분 댓글 부탁드리겠습니다..!
일단 제가 쓴 건 아래와 같습니당
/* 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 ;
}
신비님 말씀하신대로 해보았는데 메인카테고리까지 세로로 정렬돼요ㅠㅠ
뭐가 문제인 건지...
적어드린 소스를 별도의 클래스로 정의 후, 해당 요소에 추가해도 됩니다.
물론, 스타일 정의는 기존 소스보다 나중에 위치하도록....
.hz { display:block;}
<li class='hz'>
float:left
