javascript - マウスアウト時にサブメニューを開いたままにする

Question

私が取り組んでいるナビゲーション メニューには、デフォルトの CSS 動作があります (JavaScript が無効になっているまれな人向け)。デフォルトでは、サブメニューは表示されません。

.main-navigation ul ul {
display:none;
}

ホバーすると、サブメニューが表示されます。

.main-navigation ul li:hover > ul {
    display:block;  
}

JavaScript に関心のある大多数のために、メニューは次の jQuery スニペットで強化されています。

jQuery(document).ready(function($) {

/* cancel the default CSS hover behavior */

 $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
    $(this).css('cursor', 'pointer');
     });

/* toggle submenu display (if the submenu actually exists) */

   $('.main-navigation ul li a').click(function() { 
    var li = $(this).closest('li'); 
    if(li.has('ul')) li.find('ul').slideToggle(100); 
});

});

このトグルはうまく機能しますが、マウス カーソルが親リンク上にある間だけ機能します。サブメニューが開いている場合、ユーザーがたまたま親リンクからマウスを離すと、サブメニューはスナップして閉じます。

質問:サブメニューが既に開いている場合、マウスアウト時にサブメニューを開いたままにするにはどうすればよいですか?

jQueryスニペットに次のようなものを追加しようとしました:

$('.main-navigation ul li').on('mouseout',function(){
    if ($('.main-navigation ul li ul').css('display') = 'none') {
    $('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
    $('.main-navigation ul li ul').css('display', 'block');
}
});

平凡なコーディングであるだけでなく、実際には機能しません。;-(

この問題を解決するにはどうすればよいですか?

ご提案いただきありがとうございます。