Weird Behaviour Of CSS Dropdown Menu

Please take a look at this link. By hovering over the 'menu', the drop down menu will show, and it pause. Now I try to changing the menu to a TD element and assign an image to this

Solution 1:

Try

 $('#testable  #wrap').mouseenter(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/ori_', '/hover_');
     $('#nav_menu').stop(true, true).slideDown();
 }).mouseleave(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/hover_', '/ori_');
     $('#nav_menu').stop(true, true).slideUp();
 });

Fiddle

mouseout gets triggered when you hover out of the image to hover into the menu. So apply hover events on a wrapper. If this wrapper is not suitable create a wrapper to wrap menu and its image and apply hover effect on it.