묻고답하기
css effect 1차메뉴에서만 보이게 하려면?
2016.02.27 00:45
.gnb>ul>li.depth1:after {
content: '';
position: absolute;
background: #777;
width: 20%;
height: 2px;
left: 50%;
bottom: 0;
opacity: 0;
transition: all linear 0.3s;
}
식으로 현재 css 효과를 준 상태이고
참고 : https://php.quicoto.com/menu-hover-effect-inspiration/
<ul> <li class="depth1"> <a href="/index1" class="selected">Home</a> </li> <li class="depth1"> <a href="/notice">고객센터</a> <ul class="depth2" style="display: none;"> <li> <a href="/notice">공지사항</a> </li> <li> <a href="/question">Q&A게시판</a> </li> </ul> </li> </ul>
메뉴는 대략 이런식으로 구현해놨는데
현재 문제는 1차 메뉴에서 나와야 할 효과가
드랍다운 되면서 보이는 2차메뉴 하단에서 보인다는것입니다.
depth2가 depth1안에 있어서 depth1 하나로 보는것 같은데
이럴 경우 어떻게 depth1 에서만 효과를 낼 수 있을까요?
태그 연관 글
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2017/04/03] 묻고답하기 페이지에 이 소스를 적용하면 사라집니다.
- [2017/02/10] 묻고답하기 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기
- [2015/07/30] 묻고답하기 스케치북 게시판(웹진형 카드디자인)의 목록의 글자를 키우고 싶습니다. 5시간째 방황중입니다 .ㅜㅜ *9
- [2007/12/14] 묻고답하기 Permission 777 사용불가;;; *10
댓글 2
-
risepower
2016.02.27 21:39
답변 정말 감사드립니다. 말씀하신대로 하니 제대로 나오네요!
어떻게 보면
.gnb>ul>li.depth1:after 이나.gnb>ul>li.depth1>a:after 둘다속하게 되는것 같은데...결론은 정확하게 좌표를 찍어줘야 하는거군요..다시한번 답변 정말 감사드립니다.
그게 2차메뉴까지가 1차메뉴 li에 속하기 때문인데요.
.gnb>ul>li.depth1:after이걸
.gnb>ul>li.depth1>a:after 로 해 보세요.이 기준에서 .gnb>ul>li.depth1>a 공간을 잘 확보 하셔야 할겁니다.