Javascript 如何为导航栏创建平滑的下拉效果？

基本上，我正在尝试创建一个具有平滑下拉效果的导航栏。我已经创建了导航栏，但正在努力实现下拉效果。我希望当用户将鼠标悬停在导航栏中名为“Works”的选项卡上时显示下拉效果。当鼠标悬停时，我希望有两个单独的选项卡，用户可以单击导航。我希望导航栏的主题保持一致，例如字体、颜色和滚动效果。我该怎么做？任何帮助都将不胜感激。谢谢这是我的密码

window.addEventListener（“滚动”，函数（）{
var header=document.querySelector（“header”）；
header.classList.toggle（“sticky”，window.scrollY>0）；
})

*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Hind”，无衬线；
}
html{
滚动行为：平滑；
}
身体{
最低高度：200vh；
背景色：#000；
}
h3{
颜色：#3F69CA
}
/*导航栏*/
标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
过渡：0.6s；
填充：40px 100px；
z指数：100000；
字体系列：“Poppins”，无衬线；
}
头。粘性{
填充：5px100px；
背景:#f5；
字体系列：“Poppins”，无衬线；
}
标题。标志{
位置：相对位置；
字号：700；
颜色：#F5；
文字装饰：无；
字号：2em；
文本转换：大写；
字母间距：2px；
过渡：0.6s；
字体系列：“Poppins”，无衬线；
}
标题ul{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体系列：“Poppins”，无衬线；
}
标题ulli{
位置：相对位置；
列表样式：无；
字体系列：“Poppins”，无衬线；
}
标题ulli a{
位置：相对位置；
利润率：0.15px；
文字装饰：无；
颜色：#F5；
字母间距：2px；
字体大小：500px；
过渡：0.6s；
字体系列：“Poppins”，无衬线；
}
标题：悬停{
文字装饰：下划线；
}
header.sticky.logo，
标题：ul li a{
颜色：#000；
字体系列：“Poppins”，无衬线；
}

答复

尝试css动画。看看这是否有帮助：

css的关键部分是：

.container {
  position: relative;
  overflow: hidden;
  height: 200px;
  border: 1px solid grey;
}

.menuPanel {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: coral;
  animation: slideOut 600ms;
  z-index: -10;
}

@keyframes slideOut {
0% {
    top: -150px;
}
100% {
    top: 0px;
}
}

---

我会在css中使用引导和类似的东西#works子菜单：悬停>#works菜单{显示：块；页边距顶部：0；}