테스트 사이트 - 개발 중인 베타 버전입니다

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

hongzo 6년 전 조회 2,733

티스토리 스킨 수정 중인데

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

 

일기

여행

투자

 

이렇게 나오게요ㅠㅠ

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

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

 

/* 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개

float:left

로그인 후 평가할 수 있습니다

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

6년 전

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

로그인 후 평가할 수 있습니다

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

h
6년 전

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

뭐가 문제인 건지...

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

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

.hz { display:block;}



<li class='hz'>

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

s
sinbi Expert
6년 전

아래 사항 체크해 보세요.

 

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

 

로그인 후 평가할 수 있습니다

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

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

로그인