javascript - サブナビゲーションのオーバーラップを削除するにはどうすればよいですか?

Question

サブナビゲーションを作成しようとしています。現在、サブナビが2つあります。メイン メニューの最初の項目にカーソルを合わせると、対応するサブメニューが表示されます。しかし、2 番目の項目にカーソルを合わせると、2 番目のサブナビゲーションが最初の項目の上に表示されます。これが起こらないようにコードを書くにはどうすればよいですか？

URL: http://arabic001.com

$(document).ready(function() {

        $('#arbNavText01').mouseover(function()  {
            $('#subNav01').show('slow');
        });

        $('#subNav01').mouseleave(function() {
            $('#subNav01').hide('slow');
        }); 


         $('#arbNavText02').mouseover(function()  {
            $('#subNav02').show('slow');
        });

        $('#subNav02').mouseleave(function() {
            $('#subNav02').hide('slow');
        }); 



        })

Scott からの以下の提案を試しましたが、ホバー時にサブメニューを表示および非表示にすることができません。この問題を解決する方法のアイデアはありますか? これが私の新しいコードです：

html

<div id="menu01" class="menu_item">
            <div id="engNavText01">Alphabet</div>
            <div id="arbNavText01">الأحرف</div>
            <div id="subNav01" style="display:none;">
                <a href="colors" class="subNav">
                    <span style="font-size:26px; cursor:pointer;">قراءة</span</a>
                    <br>reading<br><br>
        </div>
        </div>

        <div id="menu02" class="menu_item">
            <div id="engNavText02">Numbers</div>
            <div id="arbNavText02">الأحرف</div>
            <div id="subNav02" style="display: none; ">
                <a href="colors" class="subNav">
                    <span style="font-size:26px; cursor:pointer;">قراءة</span</a>
                    <br>reading<br><br>
        </div>
        </div>

そしてJS

$(document).ready(function() {

$('.menu_item').children().hover(
function(){
    $subNav = $(this).parents('menu_item').children("div[id^='subNav'");
    if ($subNav.css('display', 'none')){
        $subNav.show('slow');
    }
},
function(){
    $(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});

})