js 슬라이드 메뉴

이제 막 js 배우기시작한 초보자입니다. 하다가 막혀서 질문드립니다...

html 소스 이구요

<nav>
      <div class="wrap">
        <div class="dropdown">
          <a class="dropbtn">a</a>
          <a class="dropbtn">b</a>
          <a class="dropbtn">c</a>
          <a class="dropbtn">d</a>
          <a class="dropbtn">d</a>

          <div class="dropdown-content">
            <ul>
              <li>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
                <a href="#">Link 1</a>
              </li>
            </ul>
            <ul>
              <li>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 2</a>
              </li>
            </ul>
          </div>
        </div>
    </div>
    </nav>

js 소스입니다

$(function(){

  $(".dropbtn").hover(function(){

    $(".dropdown-content").slideDown(2000,function(){

    })

  })

 $(".dropbtn").hover(function(){

  $(".dropdown-content").slideUp(2000,function(){

  })

 });

});

호버시 메뉴가 올라갔다가 다시 호버시 내려가게하고싶은데 왜 slideUP과 slideDown이 적용안되는지 모르겠네요.. ㅜ