Javascript div和悬停效果的问题

当我将鼠标悬停在主菜单项上时，我一直在处理一个子菜单。我一直试图找到一种不同的方式来显示相同的效果，当我从主菜单项缓慢地将鼠标移动到子菜单时，不会出现问题。（您将看到子菜单消失。）下面是JSFIDLE。任何帮助都将不胜感激

注意：与我的网站设计相比，它在JSFIDLE上看起来确实略有不同，但这并不重要

.header{
高度：自动；
宽度：70vw；
显示：内联块；
背景色：#222；
颜色：#fff；
填充顶部：15px；
填充底部：75px；
边框左上半径：10px；
边框右上角半径：10px；
}
.菜单{
高度：自动；
宽度：100%；
顶部：0px；
文本对齐：居中；
显示：表格；
表布局：固定；
背景色：透明；
边框：薄实透明；
边界间距：0px；
边界塌陷：塌陷；
}
.菜单项{
字体大小：14px；
字体系列：poppins；
颜色：#9e9e9e；
填充顶部：20px；
垫底：20px；
高度：自动；
宽度：自动；
背景色：透明；
显示：表格单元格；
文本对齐：居中；
光标：指针；
文字装饰：无；
}
.菜单项：悬停{
颜色：#fff；
背景色：#ff6e00；
}
.菜单部{
右边框：实心薄#333；
左边框：实心薄#333；
}
.menu div：最后一个孩子{
边界权：无；
}
.菜单分区：第一个孩子{
左边界：无；
}
.子菜单{
高度：自动；
宽度：100%；
显示：表格；
表布局：固定；
边界间距：0px；
边界塌陷：塌陷；
}
.子菜单项{
显示：表格单元格；
高度：自动；
宽度：自动；
字体大小：14px；
字体系列：雷威；
颜色：#999；
背景色：#333；
填充顶部：20px；
垫底：20px；
光标：指针；
}
.子菜单项：悬停{
颜色：#fff；
背景色：#666；
}
.子菜单项图标{
高度：自动；
宽度：自动；
垫底：20px；
文本对齐：居中；
垂直对齐：中间对齐；
}

家
计划及；定价
推荐书
设计中心
联系我们
关于我们
我们的使命
网站托管
同时带动了企业邮件
域名
其他服务

删除

菜单上的边框

.header{
高度：自动；
宽度：70vw；
显示：内联块；
背景色：#222；
颜色：#fff；
填充顶部：15px；
填充底部：75px；
边框左上半径：10px；
边框右上角半径：10px；
}
.菜单{
高度：自动；
宽度：100%；
顶部：0px；
文本对齐：居中；
显示：表格；
表布局：固定；
背景色：透明；
边界间距：0px；
边界塌陷：塌陷；
}
.菜单项{
字体大小：14px；
字体系列：poppins；
颜色：#9e9e9e；
填充顶部：20px；
垫底：20px；
高度：自动；
宽度：自动；
背景色：透明；
显示：表格单元格；
文本对齐：居中；
光标：指针；
文字装饰：无；
}
.菜单项：悬停{
颜色：#fff；
背景色：#ff6e00；
}
.菜单部{
右边框：实心薄#333；
左边框：实心薄#333；
}
.menu div：最后一个孩子{
边界权：无；
}
.菜单分区：第一个孩子{
左边界：无；
}
.子菜单{
高度：自动；
宽度：100%；
显示：表格；
表布局：固定；
边界间距：0px；
边界塌陷：塌陷；
}
.子菜单项{
显示：表格单元格；
高度：自动；
宽度：自动；
字体大小：14px；
字体系列：雷威；
颜色：#999；
背景色：#333；
填充顶部：20px；
垫底：20px；
光标：指针；
}
.子菜单项：悬停{
颜色：#fff；
背景色：#666；
}
.子菜单项图标{
高度：自动；
宽度：自动；
垫底：20px；
文本对齐：居中；
垂直对齐：中间对齐；
}

家
计划及；定价
推荐书
设计中心
联系我们
关于我们
我们的使命
网站托管
同时带动了企业邮件
域名
其他服务

删除

菜单上的边框

.header{
高度：自动；
宽度：70vw；
显示：内联块；
背景色：#222；
颜色：#fff；
填充顶部：15px；
填充底部：75px；
边框左上半径：10px；
边框右上角半径：10px；
}
.菜单{
高度：自动；
宽度：100%；
顶部：0px；
文本对齐：居中；
显示：表格；
表布局：固定；
背景色：透明；
边界间距：0px；
边界塌陷：塌陷；
}
.菜单项{
字体大小：14px；
字体系列：poppins；
颜色：#9e9e9e；
填充顶部：20px；
垫底：20px；
高度：自动；
宽度：自动；
背景色：透明；
显示：表格单元格；
文本对齐：居中；
光标：指针；
文字装饰：无；
}
.菜单项：悬停{
颜色：#fff；
背景色：#ff6e00；
}
.菜单部{
右边框：实心薄#333；
左边框：实心薄#333；
}
.menu div：最后一个孩子{
边界权：无；
}
.菜单分区：第一个孩子{
左边界：无；
}
.子菜单{
高度：自动；
宽度：100%；
显示：表格；
表布局：固定；
边界间距：0px；
边界塌陷：塌陷；
}
.子菜单项{
显示：表格单元格；
高度：自动；
宽度：自动；
字体大小：14px；
字体系列：雷威；
颜色：#999；
背景色：#333；
填充顶部：20px；
垫底：20px；
光标：指针；
}
.子菜单项：悬停{
颜色：#fff；
背景色：#666；
}
.子菜单项图标{
高度：自动；
宽度：自动；
垫底：20px；
文本对齐：居中；
垂直对齐：中间对齐；
}

家
计划及；定价
推荐书
设计中心
联系我们
关于我们
我们的使命
.menu {
    ...
    border: thin solid transparent;
    border-bottom: 0px; /* ADDED */
    ...
}