Question

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

Answer 1

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;
    });
});