如何在导航栏下拉菜单中获得向上滑动动画？

问：

这是我的 Style.css 文件代码：

.navbar{
type here    @apply flex mr-32   
}

.navul{
    @apply flex items-center ml-24;
    font-family: 'Nunito Sans', sans-serif;
}

.navul li a{
    @apply mx-[25px] text-base font-semibold relative cursor-pointer inline-block py-[32px] leading-9 items-center text-black tracking-normal;
    transition: all 0.2s ease-out 0s;
}

.navul li a::after {
    @apply content-[''] absolute w-0 h-[3px] bg-[rgb(67,186,255)] transition-[width] duration-[0.5s] left-0 bottom-0;
  }

.navul li a:hover::after,
.navul li a.active::after {
    width: 100%;
}

.navul li a:hover {
    color: rgb(67, 186, 255);
}

.dropdown {
    @apply relative;
    
}

.dropdownlist {
  @apply hidden absolute bg-white min-w-[160px] w-[250%] ;
  z-index: 1000;
}
.dropdown ul{
    @apply my-5
}

.dropdownlist a {
@apply text-[black] no-underline block pl-[10px] pr-[25px] ;
transform: translateZ(10px);
}

.dropdown:hover .dropdownlist {
@apply block transition-all duration-[0.3s] ease-[ease-in-out];
transform: translateZ(10px);
}

.submenu{
@apply float-none bg-white;

}

.submenu li a{
@apply mx-[25px] text-[14px] font-semibold relative cursor-pointer  py-[4px] leading-8 items-center text-black text-left block ;   
}

.submenu li a::after {
@apply content-[''] relative w-0 h-[3px] bg-[rgba(67,186,255,0)] left-0 bottom-0;
}

.submenu li a::before {
@apply content-['//'] relative w-0 h-[2px] bg-[rgba(67,186,255,0)] left-0 bottom-0 hidden;
transition: all 0s ease-out 0s;
}

.submenu li a:hover:before {
@apply content-['//'] absolute top-[10%] bg-[rgba(67,186,255,0)] block left-0;
}

.submenu li a:hover {
@apply text-[rgb(67,186,255)] no-underline transition-all duration-[0.3s] ease-[ease-in-out] box-border;
transform: translatex(10px);
}

这是我的索引.html：

 <nav>
                    <div class="navbar">
                        <ul class="navul">
                            <li> <a class="active">Home</a></li>
                            <li><a href="">About Us</a></li>
                            <li><a href="">Our Team</a></li>
                            <li class="dropdown"><a href="">What We Do </a>
                                <div class="dropdownlist">
                                    <ul class="submenu">
                                        <li><a href="#">WEB DEVELOPMENT</a></li>
                                        <li><a href="#">ECOMMECE WEBSITE DWEVELOPMENT</a></li>
                                        <li><a href="#">MOBILE APP DEVELOPMENT</a></li>
                                        <li><a href="#">DIGITAL MARKETING</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li><a href="">Blog</a></li>
                            <li><a href="">Career</a></li>
                        </ul>
                    </div>
                </nav>

我希望该下拉列表带有向上滑动动画

我尝试了我的代码，但它不起作用.....我需要像 1 秒一样平滑向上滑动动画的下拉。

我该怎么做......我在聊天 gpt 中尝试过,....但它做不到。

请给我解决方案......

我给你详细的代码......解决它并在代码中给我答案，返回我的错误并给我更新的代码