javascript - Jquery翻转但不是同一个 child ？

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/