jquery - jQuery .hover效果不适用于“li”，但适用于“a”

我在这里有代码：http://jsfiddle.net/vFJvL/
当您将鼠标悬停在子菜单上时，产品列表会下拉，但是当您将鼠标悬停在每个产品上时，它会再次隐藏它们。
我尝试将.hvr类添加到li元素中：http://jsfiddle.net/vFJvL/2/它不起作用

我希望只要您将鼠标悬停在外盖上方，就可以显示每个产品。

谢谢

编辑：
当在短时间内（例如1秒）将鼠标悬停几次时，我们还可以停止多次切换吗？我想我们需要在其他地方使用stop（）

最佳答案

这是一个有效的小提琴：http://jsfiddle.net/maniator/vFJvL/5/

$(document).ready(function(){
    //Hide the tooglebox when page load
    $(".sub").hide();
    //slide up and down when hover over heading 2
    $(".hvr").hover(function(){
        // slide toggle effect set to slow you can set it to fast too.
        $(".sub", this).slideToggle();
               //<-- get the element with class `sub` inside this li and show it
        return true;
    });
});