Javascript 如何获取导航栏'；当鼠标悬停在下拉菜单上时，下拉菜单是否要保留？

我有一个简单的网站和一个简单的导航栏，但经过大量研究后，这似乎是一项非常艰巨的任务。
当鼠标悬停在任何按钮上时，它将显示一个下拉列表以显示更多选项。
我已经很好地工作了，但是当我将鼠标悬停在下拉列表的内容上时，我该如何让下拉列表保持不变呢

基本上，当光标离开导航栏按钮并进入下拉菜单时，它不会消失

我读到jQuery可以实现这一点，但如果可能的话，我想单独用JavaScript实现，即使它很长

导航栏的悬停功能本身是有效的，但无论我在上面悬停时试图让下拉菜单保持在那里，都会一直监听所有内容

这是我的代码，我已经尝试过：

document.getElementById（“服务器”）.onmouseover=function（）{
serverMouseOver（）
};
document.getElementById（“服务器”）.onmouseout=function（）{
serverMouseOut（）
};
函数serverMouseOver（）{
document.getElementById（“serverdropdownbox”）.className+=“动画fadeIn”；
};
函数serverMouseOut（）{
document.getElementById（“serverdropdownbox”）.className+=“动画淡出”；
};
document.getElementById（“serverdropdownbox”）.onmouseover=function（）{
serverDropdownMouseOver（）
};
document.getElementById（“serverdropdownbox”）.onmouseout=function（）{
serverDropdownMouseOut（）
};
函数serverDropdownMouseOver（）{
document.getElementById（“serverdropdownbox”）.style.opacity=“1”；
};
函数serverDropdownMouseOut（）{
document.getElementById（“serverdropdownbox”）.style.opacity=“0”；
};

#navbarbox
{
明确：两者皆有；
显示：块；
宽度：100vw；
高度：3.5vw；
填充：0vw 0；
保证金：0；
}
#导航栏，#导航栏ul
{
宽度：100vw；
高度：3.5vw；
显示器：flex；
填充：0；
保证金：0；
}
#导航栏跨度
{
高度：3.5vw；
显示：块；
变换：skewX（15度）；
}
#李国宝
{
颜色：白色；
列表样式：无；
显示：内联块；
填料：1vw 3.95vw 1vw 3.95vw；
保证金：自动；
文本对齐：居中；
颜色：红色；
字体大小：2.3vw；
字体系列：Jura；
高度：2.5vw；
变换：skewX（-15度）；
}
#服务器下拉框
{
显示：块；
不透明度：0；
浮动：左；
颜色：白色；
背景色：深蓝色；
宽度：0；
}
#服务器下拉内容
{
列表样式类型：无；
宽度：16vw；
利润率：1vw 0 10.1vw；
}
#服务器下载内容李
{
边框：1px纯白；
字体大小：25px；
文本对齐：居中；
填充：1vw 0 1vw 0；
背景色：白色；
}
#服务器
{
背景颜色：蓝色；
}
#社区下拉框
{
显示：块；
浮动：左；
颜色：白色；
背景色：深蓝色；
宽度：0；
}
#社区下拉内容
{
列表样式类型：无；
宽度：19.7vw；
利润率：1vw 0 26vw；
}
#社区下拉列表
{
边框：1px纯白；
字体大小：25px；
文本对齐：居中；
填充：1vw 0 1vw 0；
}
#社区
{
背景颜色：棕色；
}			
#存储下拉框
{
显示：块；
浮动：左；
颜色：白色；
背景色：深蓝色；
宽度：0；
}
#storedropdowncontent
{
列表样式类型：无；
宽度：13.6vw；
利润率：1vw 0 45.65vw；
}
#storedropdowncontent li
{
边框：1px纯白；
字体大小：25px；
文本对齐：居中；
填充：1vw 0 1vw 0；
}
#贮藏
{
背景颜色：蓝色；
}			
#下载下载框
{
显示：块；
浮动：左；
颜色：白色；
背景色：深蓝色；
宽度：0；
}
#下载下载内容
{
列表样式类型：无；
宽度：19.8vw；
利润率：1vw 0 59.2vw；
}
#下载下载内容李
{
边框：1px纯白；
字体大小：25px；
文本对齐：居中；
填充：1vw 0 1vw 0；
}
#下载
{
背景颜色：棕色；
}			
#触点下拉框
{
显示：块；
浮动：左；
颜色：白色；
背景色：深蓝色；
宽度：0；
}
#联系人下拉内容
{
列表样式类型：无；
宽度：16vw；
利润率：1vw 0 78.9vw；
}
#接触式下拉列表
{
边框：1px纯白；
字体大小：25px；
文本对齐：居中；
填充：1vw 0 1vw 0；
}
#接触
{
背景颜色：蓝色；
}
有生气的
{
动画持续时间：1s；
动画填充模式：两者都有；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
法丹先生{
动画名称：fadeIn；
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
.淡出{
动画名称：淡出；
}




千兆分贝
CS:GO





学分
项目
贵宾


TF2
政务司司长：开始
布雷艇


联系我们
职员
上诉禁令
链接

首先-您的HTML结构无效
ul
标记只能将
li
作为直接子项，而不能将
a
作为直接子项。因此，必须将
ul>a>li
替换为
ul>li>a

第二，对于如此简单的菜单，您不需要JS。将
ul>li>ul
作为子菜单，并使用
：将
悬停在
ul>li
上以显示子菜单


ul{
填充：0；
}
李{
空白：nowrap；
列表样式：无；
}
#菜单>李{
位置：相对位置；
显示：内联块；
}
#菜单>li>ul{
位置：绝对位置；
左：0；
最高：100%；
最小宽度：100%；
猫眼石