[jquery/css] 메뉴 hover시 하단으로 내려오는 nav만들기

<header>
            <a href="#" class="logo">로고</a>
            <div class="nav">
                <a href="#">메뉴1</a>
                <a href="#">메뉴2</a>
                <a href="#">메뉴3</a>
                <a href="#">메뉴4</a>
                <a href="#">메뉴5</a>
            </div>
</header>
    <div class="subNav">
        <div>
            <a href="#">서브메뉴1</a>
            <div class="subMenu">
                <a href="#">서브1-1</a>
                <a href="#">서브1-2</a>
                <a href="#">서브1-3</a>
                <a href="#">서브1-4</a>
            </div>
            <a href="#">서브2</a>
            <div class="subMenu">
                <a href="#">서브2-1</a>
                <a href="#">서브2-2</a>
                <a href="#">서브2-3</a>
                <a href="#">서브2-4</a>
            </div>
            <a href="#">서브3</a>
            <div class="subMenu">
                <a href="#">서브3-1</a>
                <a href="#">서브3-2</a>
                <a href="#">서브3-3</a>
            </div>
    </div>

✅html
1) header에 로고와 메뉴를 작성
2) header밖에 subnav 메뉴를 작성

header{
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    width: 1200px;
    margin: 0 auto;
}
header .logo{
    display: block;
    background: url(../img/logo.png) no-repeat;
    background-size: contain;
    width: 150px;
    height: 65px;
    text-indent: -9999px;
    overflow: hidden;
}
header .nav{
    display: flex;
}
.subNav>div{
    display: flex;
    flex-direction: column;
    width: 150px;
}
.subNav div .subMenu{
    display: flex;
    flex-direction: column;
}
.subNav{
    height: 0;
    overflow-y: hidden;
    background: #f8f8f8ec;
    position: absolute;
    top: 80px;
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 100%;
}
.subNav.on{
    display: flex;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    height: 560px;
}

✅css
1) header, 로고, 메뉴 스타일을 지정
2) subNav 에 overflow-y : hidden으로 설정하고 height를 0으로 하여 숨겨준다
3) subNav에 on클래스가 추가된 스타일을 지정한다
- box-shadow로 뒷배경과 구분되게한다
- transition으로 부드럽게 하단으로 내려가게한다
- height값을 줘서 overflow hidden된 것을 보이게 한다

$( document ).ready( function() {
$(".nav").mouseenter(function () {
    $('.subNav').addClass("on");
});
$(".subNav").mouseleave(function () {
    $('.subNav').removeClass("on");
});
});

✅jquery
1) nav에 마우스가 들어오면 subNav에 on 클래스가 추가 된다
2) subNav에서 마우스가 벗어나면 subNav에 on클래스가 사라지고 기존 클래스 속성으로 돌아온다

✔ flex를 사용했을때는 slideDown과 slideUp을 쓰면 display block으로 들어오기 때문에 레이아웃이 망가진다
✔ mouse leave를 하단 메뉴가 아닌 상단 메뉴로 했을 경우 메뉴를 클릭하러 가면 메뉴가 사라져 사용성에 좋지 않다