jQuery .hover effect doesn't work on "li" but works on "a"

I have the code here: 开发者_如何转开发http://jsfiddle.net/vFJvL/ when you mouseover Submenu3 the product list dropsdown but, when you mouseover each product it hides them again.. I tried adding .hvr class into li element: http://jsfiddle.net/vFJvL/2/ it didn't work

I would like each product to be displayed as long as you mouseover the outer li..

Thanks

EDIT: Can we also stop it toggling multiple times when mouse over a couple of times in a short time (like 1 sec).. I guess we need to use stop() somewhere else

Here is a working fiddle: 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;
    });
});

It is the next() method giving you the problem. Try using find()

JSFiddle Demo: http://jsfiddle.net/Jaybles/vFJvL/6/

HTML

<li class="hvr"><a href="#"> Submenu3 </a>

JS

$(document).ready(function(){
    $(".sub").hide(); 
    $(".hvr").hover(function(){
        $(this).find(".sub").slideToggle();
        return true;
    });
});