묻고답하기

  2. Support
  3. 묻고답하기

css effect 1차메뉴에서만 보이게 하려면?

2016.02.27 00:45

risepower 

.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 에서만 효과를 낼 수 있을까요?

태그 연관 글
  1. [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. by nothing *3
  2. [2017/04/03] 묻고답하기 페이지에 이 소스를 적용하면 사라집니다. by 예지
  3. [2017/02/10] 묻고답하기 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 by 파도.
  4. [2015/07/30] 묻고답하기 스케치북 게시판(웹진형 카드디자인)의 목록의 글자를 키우고 싶습니다. 5시간째 방황중입니다 .ㅜㅜ by 더블엠씨 *9
  5. [2007/12/14] 묻고답하기 Permission 777 사용불가;;; by 고전게임헤븐 *10
, 이 게시물을
좋아요
목록
태그 쓰기