Question

I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?

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');
        }); 



        })

I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:

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>

and the 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');
});

})

Answer 1

You’ve created a mouseleave event, but you’ve only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:

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

Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren’t clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.

I’m going to spit ball an idea, it may not even work let alone be the best way.

<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">...

Edited JS, I think now it could work

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

Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.