Javascript 具有滑动悬停效果的导航菜单

有人能帮我做这个吗？我有一个导航/菜单栏。每当我在任何“li”上悬停时，它都会得到一个背景色（红色）。每当我将光标移动到下一个/上一个

li

时，我想要做的是以平滑的效果移动

背景色。当我从导航/菜单栏移出时，背景色（红色）应返回“Home li”作为默认颜色。请检查我的，以方便您


$（'nav li'）。悬停(
函数（）{
$（'ul'，this.stop（）.slideDown（200）；
},
函数（）{
$（'ul'，this.stop（）.slideUp（200）；
}
);
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}
nav{背景：#2ba0db；}
nav ul{字体大小：0；边距：0；填充：0；}
nav ul li{显示：内联块；位置：相对；}
nav ul li:第一个子项{显示：内联块；位置：相对；背景：红色；}
nav ul li a{颜色：#fff；显示：块；字体大小：14px；填充：15px 14px；过渡：0.3s线性；文本装饰：无；}
导航ulli:悬停{背景：红色；}
导航ul li ul{边框底部：5px实心#2ba0db；显示：无；位置：绝对；宽度：250px；z索引：1；}
导航ulli{边框顶部：1px实心#444；显示：块；}
nav-ul-li：第一个孩子{边境无顶；}
纳瓦尔利利亚酒店{
背景#3737；
显示：块；
填充：10px 14px；
文字装饰：无；
}
nav ul li a:悬停{
背景：#126d9b；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{float:right；display:inline block；}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{位置：绝对；右侧：0；顶部：0；}
ul.topnav.li{float:none；display:inline；}
ul.topnav.li{显示：块；文本对齐：左；}
}












这就是你要找的吗？（第二个例子）