JQuery rollover, но не тот же ребенок?

Question

Что я хочу сделать, когда я прокручиваю .mainmenu, тогда .submenu исчезает, но проблема в том, что оба они не связаны с родителями и дочерними элементами, поэтому как я могу заставить .submenu оставаться видимым при перемещении курсора от .mainmenu до .submenu?

http://codepen.io/vincentccw/pen/LnvJE

my html: 
////////////////////////////////////////////// 

<div class="mainmenu">this is text</div> 
<div class="submenu">this is text2</div> 

////////////////////////////////////////////// 

my js: 
////////////////////////////////////////////// 

$(document).ready(function() { 

$(".mainmenu, .submenu").mouseenter(function(){ 
    $(".submenu").stop(true,true).slideToggle(); 
    console.log('slide down'); 
}).mouseleave(function(){ 
    $(".submenu").stop(true,true).slideToggle(); 
    console.log('slide up'); 
}); 

}); 

//////////////////////////////////////////////// 

Answer 1

$(document).ready(function() { 

$(".mainmenu").mouseenter(function() { 
    $(".submenu").stop(true, true).slideToggle(); 
    // console.log('slide down'); 
}).mouseleave(function (e) { 
    if (e.relatedTarget.className != "submenu") $(".submenu").stop(true, true).slideToggle(); 
    // console.log('slide up'); 
}); 

$(".submenu").mouseleave(function (e) { 
    $(".submenu").stop(true, true).slideToggle(); 
    // console.log('slide up'); 
}); 

}); 

http://jsfiddle.net/3bLbJ/1/