How to implement dropdown menu Vanilla JS CSS – Blancer.com Tutorials and projects

I have been attempting to put together a drop down menu which slides down rather than “just appears” upon the click event. I tried to apply a transition to the drop down menu with no success. Help would be appreciated. I would like come to a solution with both css and javascript.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
  <div class="logo">
    <p id="logo">Logo</p>
    <button id="btn"><i class="fa-solid fa-bars"></i></button>
  </div>
   <nav class="nav">
     <ul class ="dropmenu" id="dropdown">
       <li><a href="contact.html" class="link">Link 1</a></li>
       <li><a href="#" class="link">Link 2</a></li>
       <li><a href="#" class="link" id="last">Link 3</a></li>
     </ul>
   </nav>
   <div class = input>
   <!-- <input type="checkbox" id="myCheckbox"> -->
  </div>
    <script src="script.js"></script>
  </body>
</html>

CSS
Applied a transition to the #dropdown but with no success


body {
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.logo {
    display: block;
    text-align: left;
    background: #f8f9f9;
    height: 10vh;
}

.logo #logo {
    display: inline;
    line-height: 10vh;
    font-size: 1.6em;
    margin-left: 0.5em;
    color: #438ED9;
    
}

button#btn {
    display: inline;
    float: right;
    margin-right: 2em;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    background-color: #f8f9f9;
    padding: 0;
}

nav {
    display: block;
    background-color: #438ED9;
    width: 100vw;
    /**/
}

nav ul#dropdown {
    display: none;
    list-style-type: none;
    margin: 0; 
    padding-left: 0;
    box-shadow: none; 
    overflow-y: hidden;
    max-height: 21vh; /* approximate max height */

    transition-property: all;
    transition-duration: .5s
}


nav ul li {
    text-align: center; 
    
}



.link {
    display: block;
    color: white;
    font-size: 1.5em;
    background-color: #438ED9;
    text-decoration: none;
    width: 100vw;
    height: 7vh;
    line-height: 7vh;
    border-bottom: 2px solid black;
    text-align: center;
    
}

 #last {
    border-bottom: none;
}

.link:hover {
    background-color: blue;
}

.link:active {
    background-color: blue;
}

.visible {
    display: block !important;
}

.fa-bars:before, .fa-navicon:before {
    content: "f0c9";
    font-size: 20px;
    line-height: 10vh;
}

.fa-solid .fa-bars:hover {
    color: red;
}
.fa-solid:active, .fa-bars:active {
    color: grey;
}

@media only screen and (min-width: 480px) { 
    
    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }

    /* #dropdown {
        display: block;
    } */

}
  
  @media only screen and (min-width: 600px) {

    .fa-bars:before, .fa-navicon:before {
        font-size: 30px;
    }

    nav ul {
        display: block;
        text-align: center;
        float: right;
        margin-right: 30px;
    }
    nav ul li {
        display: inline;
        text-align: center;
        padding: 0 10px;

    }
    #btn i {
        display: none;
    }

    nav {
        height: 7vh;
    }

    .link {
        display: inline;
        color: white;
        font-size: 1.2em;
        border-bottom: none;

    }
    .link:hover {
        background-color: #438ED9;
    }
    
    .link:active {
        background-color: #438ED9;
    }

    
}

document.querySelector("body").addEventListener("click", function(event){  
    let dropd = document.querySelector('#dropdown');
    if (!event.target.parentNode.matches('#btn')) {    
      dropd.classList.remove("visible");
    } else {
      dropd.classList.toggle("visible");
    }
  });