javascript - Javascript はメニュー項目では遅延なしですが、メニューからホバーすると 5 秒の遅延が発生します

Question

ドロップダウン メニューがあり、各ドロップダウンに 0.3 秒の遅延でホバーできるようにしたいのですが、メニューをロールオフすると、フェードアウトする前に 2 秒一時停止する必要があります。

マークアップ:

<ul class="mainnav">
    <li><a href="#">item 1</a>
        <ul class="sub">
            <li><a href="#">item a</a></li>
            <li><a href="#">item b</a></li>
            <li><a href="#">item c</a></li>
        </ul>
    </li>
    <li><a href="#">item 2</a>
        <ul class="sub">
            <li><a href="#">item d</a></li>
            <li><a href="#">item e</a></li>
            <li><a href="#">item f</a></li>
        </ul>
    </li>
</ul>

jquery:

function(){
    $('.mainnav > li').hover(
        function () {
             $(this).find('sub').fadeIn(300);
             },
        function () {
             $(this).find('sub').fadeOut(300);
        }
    );
    $('.mainnav').mouseout( function() {
        setTimeout(function() {
           $(this).find('sub').fadeOut(300);
        }, 2000);
    });
}

したがって、「アイテム 1」をロールオーバーすると、ドロップダウンして「アイテム a」、「アイテム b」、「アイテム c」が表示されます。「アイテム 2」にカーソルを合わせると、ドロップダウンして「アイテム d」、「アイテム e」、「アイテム f」が表示されます。

「.mainnav」からロールアウトする場合、フェードアウトする前にロールオーバーされたドロップダウンを遅らせる必要があります。

しかし、それはそれがしていることではありません。別のメニュー項目をロールオーバーするように、フェードアウトしています。

前もって感謝します。