jquery - 悬停状态很古怪

Question

我一直在研究一个下拉菜单，父项和子项都有不同的颜色，当处于悬停状态时颜色会发生变化:

http://jsfiddle.net/cELJ6/1/

不过我对此有个小怪癖。

Home 链接没有悬停，Products 和 Section2 也没有悬停。

问题是:

1) 当我将鼠标悬停在 Product 上时，链接的颜色需要为白色。 (BG 颜色很好，工作正常)

2) 当我将鼠标悬停在子元素上时，例如 Product1，Products 链接颜色需要为白色

在 Products 和 Section2 之间徘徊似乎很古怪。颜色有时是白色，有时是灰色 (#777)

有解决办法吗？

谢谢

Answer 1

$('ul > li.leaf').each(function(){
    $(this).mouseenter(function(e){
        $(this).find('a').css('color','white');
    });
    $(this).mouseleave(function(e){
        $(this).find('a').css('color','#777777');
    });

   });

 $('.expanded > ul.leaf').each(function(){
    $(this).mouseenter(function(e){
        $(this).find('a').css('color','white');
    });
    $(this).mouseleave(function(e){
        $(this).find('a').css('color','#777777');
    });

   });