菜单Javascript下划线阻止下拉菜单正常工作

我在菜单上加了一条下划线，当人们用鼠标悬停在上面的时候。问题是下拉菜单不再工作

我可以说javascript函数的目标是所有的锚链接。那么，解决下拉菜单问题的最佳方法是什么？我是否应该将QuerySelectorAll更改为类，而不是锚定链接，并在我希望下划线位于的菜单周围添加更多的类/div

想知道这是解决这个问题的正确方法吗？请仅在桌面上查看。我将在手机上删除此功能

（函数（）{
const target=document.querySelector（“.target”）；
const links=document.queryselectoral（“.mynav a”）；
常量颜色=[“深蓝”、“橙色”、“耐火砖”、“金色”、“洋红”、“黑色”、“深蓝色”]；
函数mouseenterFunc（）{
如果（！this.parentNode.classList.contains（“active”））{
for（设i=0；ie.preventDefault（））；
链接[i]。添加了文本列表（“mouseenter”，mouseenterFunc）；
}
函数resizeFunc（）{
const active=document.querySelector（“.mynav li.active”）；
如果（活动）{
const left=active.getBoundingClientRect（）.left+window.pageXOffset；
const top=active.getBoundingClientRect（）.top+window.pageYOffset；
target.style.left=`${left}px`；
target.style.top=`${top}px`；
}
}
window.addEventListener（“resize”，resizeFunc）；
})();
/*当用户单击图标时，在向topnav添加和删除“响应”类之间切换*/
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

@导入url（'https://fonts.googleapis.com/css?family=Roboto:400，500700900&display=swap'）；
/* 
黄色-#f7c51e
灰色#3636
背景白色-#f6f6f6
*/
* {
框大小：边框框；
保证金：0；
填充：0；
}
.彩色套印容器{
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.彩色套印{
宽度：100%；
身高：100%；
背景：#000；
不透明度：.5；
z指数：2；
位置：绝对位置；
}
.btn黑色{
填充：1.5rem 2rem；
颜色：白色；
背景：黑色；
文本转换：大写；
字号：900；
}
.btn黄色{
填充：1.5rem 2rem；
颜色：白色；
背景：#f7c51e；
文本转换：大写；
字号：900；
}
身体{
字体系列：“Roboto”，无衬线；
线高：1.4；
}
a{
文字装饰：无；
}
p{
保证金：.5雷姆0；
}
/*实用程序类*/
/*网格容器*/
.网格容器{
显示：网格；
网格模板列：重复（3，1fr）；
网格间距：1rem；
保证金：自动；
网格自动行：最小最大值（200px，自动）；
}
.grid-container-2{
显示：网格；
网格模板列：重复（2，1fr）；
网格间距：1rem；
保证金：自动；
}
.卡片{
背景：#fff；
填充：1rem；
}
/*网格容器-结束*/
.集装箱{
最大宽度：1404px；
保证金：自动；
填充：02rem；
溢出：隐藏；
}
.文本中心{
文本对齐：居中；
}
.文本黄色{
颜色：#f7c51e；
}
.bg黄色{
背景：#f7c51e；
颜色：黑色；
}
.bg灰色{
背景#f9f9f9；
颜色：黑色；
}
.l-标题{
字体大小：粗体；
字号：4rem；
边缘底部：0.75雷姆；
线高：1.1；
}
m-标题{
字号：2rem；
边缘底部：0.75雷姆；
线高：1.1；
}
.铅{
字体大小：1.3rem；
保证金：0.750雷姆；
}
/*填充物*/
.py-1{
填充：1.5雷姆0；
}
.py-2{
填充：2rem0；
}
.py-3{
填充：3rem 0；
}
/*全方位填充*/
.p-1{
填充：1.5雷姆；
}
.p-2{
填充：2rem；
}
.p-3{
填充：3rem；
}
/*实用程序类-结束*/
/*===================================================================================================*/
/*标题*/
.网站标题{
背景色：透明；
}
.site header.header容器{
背景：黑色；
颜色：白色；
}
/*黑条*/
.site header.header container.header-container\u wrap{
填充：30px 5px；
/*背景：红色*/
}
#桅顶.顶盖容器.顶盖-容器包装.项目{
显示器：flex；
}
#报头。报头容器。报头容器包装。物品。联系信息{
显示器：flex；
}
#报头。报头集装箱。报头集装箱包装。项目。质量标志{
保证金权利：3rem；
线高：5px；
}
#桅顶。桅顶集装箱。桅顶集装箱包装。项目。质量标志p{
字体大小：14px；
}
#报头.报头容器.报头容器包装.项目.项目{
显示器：flex；
对齐项目：居中；
右边距：1rem；
}
#报头.报头容器.报头容器包装.项目.项目{
显示器：flex；
对齐项目：居中；
右边距：1rem；
}
#maisthead.header容器.header-container_-wrap.items.item.facebook-like{
文本对齐：居中；
}
#桅顶.桅顶集装箱.桅顶集装箱包装.items.item.fas{
字号：18px；
颜色：#f7c
.target{
    pointer-events: none;
}