Javascript导航栏如何修复？

我制作了这个javascript导航栏，我使用了一个简单的CSS使它看起来和工作正常，但问题是当我将鼠标悬停在按钮上时，我的下拉菜单不起作用，我不知道这是为什么

它只在我对它们都单击1次后才起作用

所以我想当我将鼠标悬停在上面时，自动放下块

谁能给我一些建议吗

函数显示下拉列表（idSelector）{
document.getElementById（idSelector.classList.toggle（“显示”）；
buildDropdown（idSelector）；
}
函数构建下拉列表（idSelector）
{
var newLinks=newarray（）；
var finalHtml=“”；
如果（idSelector==='主页\下拉菜单\'b'）
{
新链接=[
{displayText:“Camasi”，linkUrl:#“}，
{displayText:“Pantaloni”，链接URL:#“}，
{displayText:“Bluze”，linkUrl:#“}，
{displayText:“Blugi”，linkUrl:“#”}，
{displayText:“Tricouri”，链接URL:#“}
];
}
else if（idSelector==='主页\下拉菜单\ f'）
{
新链接=[
{displayText:“Camasi”，linkUrl:#“}，
{displayText:“Pantaloni”，链接URL:#“}，
{displayText:“Bluze”，linkUrl:#“}，
{displayText:“Blugi”，linkUrl:“#”}，
{displayText:“Tricouri”，链接URL:#“}
];
}
对于（i=0；i

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.buildDropdown:悬停{
显示：块；
}

下拉列表
下拉列表

看起来您只需将HTML中的

onclick

侦听器更改为

onmouseover

：

函数显示下拉列表（idSelector）{
document.getElementById（idSelector.classList.toggle（“显示”）；
buildDropdown（idSelector）；
}
函数构建下拉列表（idSelector）
{
var newLinks=newarray（）；
var finalHtml=“”；
如果（idSelector==='主页\下拉菜单\'b'）
{
新链接=[
{displayText:“Camasi”，linkUrl:#“}，
{displayText:“Pantaloni”，链接URL:#“}，
{displayText:“Bluze”，linkUrl:#“}，
{displayText:“Blugi”，linkUrl:“#”}，
{displayText:“Tricouri”，链接URL:#“}
];
}
else if（idSelector==='主页\下拉菜单\ f'）
{
新链接=[
{displayText:“Camasi”，linkUrl:#“}，
{displayText:“Pantaloni”，链接URL:#“}，
{displayText:“Bluze”，linkUrl:#“}，
{displayText:“Blugi”，linkUrl:“#”}，
{displayText:“Tricouri”，链接URL:#“}
];
}
对于（i=0；i

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.buildDropdown:悬停{
显示：块；
}

下拉列表
下拉列表

还有另一种解决方案

var dropbtn=document.getElementsByClassName（“dropbtn”）；
var dropdowns=document.getElementsByClassName（“dropdown”）；
对于（var k=0；k

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
滴