Html 向下转换菜单

我找不到解决问题的办法。我有一个带按钮的导航栏，可以切换“”。我设置了一个过渡“过渡：所有0.5秒的缓进缓出；”但不知何故，我的菜单动画是横向的，而不是向下的。唯一有帮助的是

转换：可见性为0，不透明度为1和。作为参考，我想像这个菜单的动画的东西

不知什么原因，我不能把它放在小提琴里。对不起

<script>

      $('.menu-toggler').click(function(){
         $(this).toggleClass("active");
         $(".navbar").toggleClass("nav_sticky");
         if ( $(".menu").css("visibility") == "hidden" ){
            $(".menu").css("visibility", "visible");
            $(".menu").css("opacity", "1");
         }else{
          $(".menu").css("visibility", "hidden");
          $(".menu").css("opacity", "0");
         }
      })
</script>

<nav class="navbar">

      <div class="position"> 
        <a  href="index.html" class="logo">
          <h4 >Photography</h4>
        </a>
        
        <button class="menu-toggler">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About me</a></li>
      </ul>

    </nav>

/*--------------------------------------- Navbar ----------------------------------------*/
.navbar{
    position: absolute;
    left:0px;
    top:0px;
    z-index:100;
    background-color: transparent;
    margin:auto;
    width:100%;
    transition: .3s linear;
    padding: 0 2em;
}
.nav_sticky{
    position:relative;
    left:0px;
    top:0px;    
    z-index:100;
    background-color:#dddddd;
    margin:auto;
    width:100%;
    height: auto;
    padding: 0;
}

.navbar .position{
    padding:0.8rem 0;
    position: relative;
}
.nav_sticky .position{
    padding:0.8rem 2em;;
    position: relative;
}

/* "Photography" */
.navbar .logo{
    position:relative;
    color:black;
    -webkit-text-stroke: 1px black;
    font-size: 30px;
    letter-spacing: 1px;    
    display: inline-block;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.nav_sticky .logo{
    position: relative;
    color:black;
    -webkit-text-stroke: 1px black;
    font-size: 30px;
    height: 1.4rem;
    letter-spacing: 1px;    
    display: inline-block;  
    margin-bottom: 1rem;
}
.logo:hover{
    cursor: pointer;
    text-shadow: 0px 0px 8px  rgba(0, 0, 0, 0.4);
    transition: .3s linear;
}

/* Menu-toggler */
.navbar .menu-toggler{
    background:transparent;
    height: 2.3rem;
    width: 2.6rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    position: absolute;
    right:0;
    transition: .3s linear;
}
.navbar .menu-toggler span{
    display: block;
    height: 4px;
    background-color: white;
    border-radius: 2px;
    position: relative;
    transition: .3s linear;
}

.nav_sticky .menu-toggler{
    background:transparent;
    height: 2.3rem;
    width: 2.6rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    position: absolute;
    right:2em;
    transition: .3s linear;
}
.nav_sticky .menu-toggler span{
    display: block;
    height: 4px;
    background-color: black;
    border-radius: 2px;
    position: relative;
    transition: .3s linear;
}
.navbar .menu-toggler span:nth-child(2){
    margin-top: 4px;
    margin-bottom: 4px;
}

.menu-toggler:hover span{
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.nav_sticky .menu-toggler.active span:nth-child(1){
    transform: rotate(-45deg);
    top:0.5rem;
    background-color:black;
}
.nav_sticky .menu-toggler.active span:nth-child(2){
    opacity: 0;
}
.nav_sticky .menu-toggler.active span:nth-child(3){
    transform: rotate(45deg);
    bottom:0.5rem;
    background-color:black;
}

/*-------------------x------------------- Navbar -------------------x--------------------*/

/*----------------------------------- Menu(left-side) -----------------------------------*/

.menu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 1s ease;
}
.menu li a{
    display: block;
    background-color: #dddddd;
    padding: 1rem 2rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 1000;
    color: black;
}
.menu li a:hover{
    cursor: pointer;
    text-shadow: 0px 0px 8px  rgba(0, 0, 0, 0.4);
    text-decoration: underline;
    transition: .3s linear;
}
.menu li:hover {
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: .3s linear;
    z-index:101;
}