jQuery .hover effect doesn't work on "li" but works on "a"
<p>I have the code here: <a href="http://jsfiddle.net/vFJvL/" rel="nofollow">http://jsfiddle.net/vFJvL/</a> 
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: <a href="http://jsfiddle.net/vFJvL/2/" rel="nofollow">http://jsfiddle.net/vFJvL/2/</a> it didn't work</p>

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

<p>Thanks</p>

<p><strong>EDIT:</strong>
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</p>
