4일차 - :hover (2)

HTML

      <header id="hd">
        <div class="container d-flex justify-content-between align-items-center">
            <h1><a href=""><img src="" alt="">세계의 미술작품</a></h1>
            <ul id="gnb" class="d-flex">
                <!-- position:absolute는 나를 감깐 부모태그 중 position:relative 선언한 것만 부모로 인정 & 이를 기준으로 움직임 -->
                <li class="rel">
                    <a href="">소장처별</a>
                    <!-- 스타일 지정 시, 공통 클래스는 잡지 마라 .abr{} (X) -->
                    <ul class="abs">
                        <li><a href="">소메뉴1</a></li>
                        <li><a href="">소메뉴2</a></li>
                        <li><a href="">소메뉴3</a></li>
                    </ul>
                </li>
                <li><a href="">장르별</a></li>
                <li><a href="">테마별</a></li>
                <li><a href="">시대별</a></li>
            </ul>
        </div>
    </header>

---

CSS 스타일 추가

3-1. 2뎁스 소메뉴 보이기 #gnb ul {}

<style>
    #hd{ background-color: black;}
    #hd a{ color: white; }
    #hd h1 a { font-size: 2em; }
    #gnb { margin-left: auto; }
    
    #gnb li{ margin-left: 1rem; } 
    #gnb li a{     	
    	padding: 1rem;
        transition: 0.5s; /* 트랜지션 */
        border-radius: 30px;
    }     
    #gnb li:hover a{ backgroung-color; yellow; color: black; }
    
    #gnb ul{
            border: 1px solid #222;
            background-color: white;
            width: 120px;
    }
    #gnb ul a{ color: black; display: block; }
</style>

3-2. 2뎁스 소메뉴 보이기 #gnb > li:hover ul{ display: block; }

<style>
    #hd{ background-color: black;}
    #hd a{ color: white; }
    #hd h1 a { font-size: 2em; }
    #gnb { margin-left: auto; }
    
    #gnb li{ margin-left: 1rem; } 
    #gnb li a{     	
    	padding: 1rem;
        transition: 0.5s; /* 트랜지션 */
        border-radius: 30px;
    }     
    #gnb > li:hover > a{ background-color: yellow; color: black; }
    #gnb > li:hover ul{ display: block; } /* 대메뉴 li에 마우스 올리면 소메뉴 등장 */
    
    #gnb ul{
            border: 1px solid #222;
            background-color: white;
            width: 120px;
            display: none; /* --------소메뉴 숨어!-------- */
    }
    #gnb ul a{ color: black; display: block; }
</style>

#gnb ul{ display: none; } 소메뉴 숨어!
#gnb > li:hover ul{ display: block; } 대메뉴 li에 마우스 올리면 소메뉴 등장!