Javascript Jquery下拉选项-悬停和背景颜色问题-有更好的方法吗？

我正在尝试使用CSS和jquery创建一些下拉元素。以下是我努力实现的目标：

• 当鼠标悬停在句子中的特定单词上时，背景 单词的颜色被改变，出现一个下拉列表，其中有一些 选项（使用相同的背景色）
• 原来突出显示的单词的背景色应保持不变
  当鼠标悬停在下面的选项上时
• 离开下拉列表后，它应返回到隐藏和 原始单词应恢复为透明的背景色

我目前的解决方案并不完美。悬停有时会导致下拉菜单稍微闪烁。我想知道是否有人能建议一些更好的方法

我觉得我所做的真的有点不对劲。我不确定如何选择用户最初悬停在其上的特定li元素，以便我可以更改该特定元素的bg颜色（无需专门为每个父li分配ID）。因此，我只需在离开下拉列表时将所有li元素更改为透明，然后如果再次突出显示单词，则必须将所有元素更改为蓝色bg颜色。此外，当我在子项上悬停时，每次都会有效地改变背景颜色，这似乎不是最好的方法

下面是javascript：

     $('#nav li').hover(
    function () {

       $(this).css('background-color', '#A7B7FF'); // to set parent item to  blue
        $('ul', this).css('background-color', '#A7B7FF'); // set sub items to  blue
        //show its submenu
        $('ul', this).css('z-index', '600'); // so it overlaps other drop down below
        $('ul', this).slideDown(100);

    },
    function () {
        //hide its submenu

        $('ul', this).slideUp(100,
            function() {

               $('li').css('background-color', 'transparent'); // callback so parent item returns to transparent


            }
        );
    }
);

有关完整示例，请参见此处：

---

非常感谢

我将hoverleave限制了500毫秒，所以它不会闪烁。这也意味着在用户离开该区域后，菜单需要500毫秒才能消失，因此用户可以意外地离开该区域一段时间，然后再回来，而不必重新设置动画

编辑：我需要将取消添加到限制的悬停中

---

谢谢你的帮助，你的加入肯定会让事情变得更顺利。关于如何在jquery中选择父

元素，您有什么想法吗？目前在slideUp回调中，我将所有

元素设置为透明，然后在再次执行悬停时必须将它们的颜色更改回蓝色。或者这真的是唯一的选择吗？我使用了

$（“li”）.parents（“li”）.css（“背景色”，“透明”）这里：最简单的方法就是给父李的类标识符，然后使用选择器。啊，明白了！非常感谢你的帮助。我会玩一下油门功能。在这个例子中，我注意到，如果你要在500毫秒内从星期一移动到星期一，第一个下拉菜单会一直保持不变，直到你再次将鼠标悬停在它上面，但别担心，你已经给了我所有我需要继续的东西。干杯