Javascript CSS/JQuery：当鼠标悬停在另一个列表项上时，菜单列表标题下拉

每当我将鼠标悬停在“blog”选项上时，我都会看到一个包含3个项目的列表。悬停本身功能完美：列表子项显示在列表项下方。但是，菜单项所在的div向下展开，菜单项标题向下移动到div的最底部，而悬停的列表项保持在原始位置。有人有什么想法吗？谢谢

代码：

//下拉悬停代码
$（文档）.ready（函数（）
{
//悬停菜单栏列表
$（'li'）。悬停（函数（）
{
//查找列表项的子项
//添加停止函数以停止悬停队列
$（this.find（'ul>li'）.stop（）.fadeToggle（300）；
});
//结束下拉悬停
//菜单背景色悬停
$（'a'）.css（'background-color'，'white'）。悬停（function（）
{
$（this.css（'background-color'，'pink'）；
},
函数（）
{
$（this.css（'background-color'，'white'）；
});
//结束背景色悬停
});
//结束准备功能

@介质（最大宽度：480px）{
#下拉菜单{
显示：块！重要；
边框：1px纯黑！重要；
右边界：没有！重要；
左边界：无！重要；
}
#标题\u img\u容器{
利润底部：10%；
}
#货柜名称{
页边距顶部：0！重要；
利润底部：10%；
职位：相对！重要；
}
#下拉菜单{
边框底部：无！重要；
}
}
/*将标题div的大小更改为650px*/
@介质（最大宽度：650px）{
#货柜名称{
字体大小：3em！重要；
}
}
/*在807px处更改标题img的大小*/
@介质（最小宽度：807px）{
#标题\u img\u容器{
利润率最高：3%；
}
#标题(img){
最大宽度：650px；
高度：自动；
}
}
/*在1300px处更改标题img的大小*/
@介质（最小宽度：1300px）{
#标题(img){
最大宽度：600px；
最大高度：700px；
}
}
身体{
/*背景色：#dee1e5*/
背景图片：url（“../../img/title_chevron.jpg”）；
字母间距：1px；
}
#标题\u img\u容器{
最大宽度：100%；
高度：自动；
}
#标题(img){
边框：实心1px黑色；
宽度：100%；
高度：自动；
盒影：2PX2PX2PX5PX#8888888；
}
#货柜名称{
边框：纯色2px黑色；
宽度：100%；
字体系列：“龙虾”，草书；
字号：5em；
颜色：金色；
文本对齐：居中；
背景色：白色；
}
#菜单容器{
字体大小：30px；
}
#img_和内容{
利润率：5%；
}
#下拉菜单，
#下拉菜单{
保证金：0；
填充：0；
列表样式：无；
}
#下拉菜单{
显示：内联块；
}
#下拉菜单a{
填充：10px 20px；
显示：块；
颜色：继承；
文字装饰：无；
}
#下拉菜单{
显示：无；
背景色：#渔护署！重要；
垂直对齐：顶部；
}
李阿{
颜色：金色；
}
#主页面容器{
填充：2%5%2%5%；
边框：黑色1px实心；
字体系列：“Helvetica”，Arial；
背景色：白色；
}
#内容与标题{
字体系列：“龙虾”，草书；
}
#页脚容器{
颜色：黑色；
文本对齐：居中；
}

你的名字












在此处插入标题。
Lorem ipsum dolor sit amet，是一位杰出的献身者。Sed eget viverra ipsum。
&抄袭；2018年Erika Marie McBride | Kelly Catbagan网站

您可以将以下内容添加到CSS中，以处理博客的子菜单，这是一个非常简单的解决方案，适用于不使用移动版本的情况。我相信还有其他方法可以解决这个问题。在移动视图中，默认情况下会显示子菜单。您可能想看看如何通过单击事件在移动设备中切换显示/隐藏它

@media (min-width: 480px) {
  li.blogs ul {
    position: absolute;
    float: left;
    z-index: 1000;
  }
}

另外，仅供参考，您在HTML中多次包含jQuery库源代码，这是不必要的。对于这个示例代码段，我还删除了对本地JS和IMG文件的引用

//下拉悬停代码
$（文档）.ready（函数（）{
//悬停菜单栏列表
$（'li'）。悬停（函数（）{
//查找列表项的子项
//添加停止函数以停止悬停队列
$（this.find（'ul>li'）.stop（）.fadeToggle（300）；
});
//结束下拉悬停
//菜单背景色悬停
$（'a'）.css（'background-color'，'white'）。悬停（function（）{
$（this.css（'background-color'，'pink'）；
},
函数（）{
$（this.css（'background-color'，'white'）；
});
//结束背景色悬停
});
//结束准备功能

@介质（最大宽度：480px）{
#下拉菜单{
显示：块！重要；
边框：1px纯黑！重要；
右边界：没有！重要；
左边界：无！重要；
}
#标题\u img\u容器{
利润底部：10%；
}
#货柜名称{
页边距顶部：0！重要；
利润底部：10%；
职位：相对！重要；
}
#下拉菜单{
边框底部：无！重要；
}
}
/*将标题div的大小更改为650px*/
@介质（最大宽度：650px）{
#货柜名称{
字体大小：3em！重要；
}
}
/*在807px处更改标题img的大小*/
@介质（最小宽度：807px）{
#标题\u img\u容器{
利润率最高：3%；
}
#标题(img){
最大宽度：650px；
高度：自动；
}
}
/*在1300px处更改标题img的大小*/
@介质（最小宽度：1300px）{
#