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，header.sticky ul li a{
颜色：#000；
字体系列：“Poppins”，无衬线；
}

答复

您可以创建自己的弹出窗口，并根据鼠标位置调整弹出窗口的位置，这样弹出菜单就不会受到影响

试试这个

window.addEventListener（“滚动”，函数（）{
var header=document.querySelector（“header”）；
header.classList.toggle（“sticky”，window.scrollY>0）；
})
var worksbtn=document.querySelector（“#works”），altmenu=document.querySelector（“.altmenu”）
worksbtn.onmouseover=函数（e）{
altmenu.style.top=e.clientY+30+“px”；//或AA px
altmenu.style.left=e.clientX-50+“px”；//或BB px
altmenu.style.display=“块”
animeOpen（）
}
altmenu.onmouseout=功能（e）{
动物糖（）
}
函数animeOpen（）{
设i=0；
让openinterval=setInterval（（）=>{
altmenu.style.height=i+“px”
i=i+10
如果（i==180）{clearInterval（openinterval）}
}, 1);
}
函数animeClose（）{
设i=altmenu.style.height.replace（“px”和“）；
让closeinterval=setInterval（（）=>{
altmenu.style.height=i+“px”
i=i-10
如果（i==0）{clearInterval（closeinterval）；altmenu.style.display=“none”}
}, 1);
}

*{
保证金：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，header.sticky ul li a{
颜色：#000；
字体系列：“Poppins”，无衬线；
}
.altmenu{位置：绝对；z索引：999；宽度：100px；显示：无；背景色：#333；}
.altmenuli{浮动：左；宽度：100px；高度：30px；边框底部：1px实心#666；}