Diagonal mouse hover with 3-level deep jquery drop down menu

Question

First of all Everything that I am about to explain is demonstrated in this fiddle:

http://jsfiddle.net/rxaBH/3/

Consider a navigation tab that goes deep 3 levels; 1st level the tabs, 2nd level: the drop down list. 3rd level the 2nd drop down list that opens to the side. Here's a visual:

. The simplified HTML for it would looks something like this:

<ul id = "maintabs">
    <li>child 1</li>
    <li>child 2
        <ul>
            <li>grand child 1</li>
            <li>grand child 2
                <ul>
                    <li>great grand child 1</li>
                    <li>great grand child 2</li>
                    <li>great grand child 3</li>
                </ul>                
            </li>
        </ul>    
    </li>
</ul>

I won't bother with putting the CSS code here, as it is too long but it can be found in the fiddle link .

Here's the jQuery code that displays/hides the menu based on mouse over:

$("ul#maintabs li").hover(function () {
    $('ul:eq(0)', this).stop(true, true).animate({
        height: 'show',
        opacity: 'show'
    }, 150);
}, function () {
    $('ul:eq(0)', this).animate({
        height: 'hide',
        opacity: 'hide'
    }, 150);
})

All of this works great, but the user interaction could improve for navigating to 3rd level items. Lets say you want navigate to Watermelon > Green > Really Dark Green. so you would hover over "Watermelon", then the drop down appears, then hover down to "green" then the side dropdown appears. THEN horizontally hover from "green" to "darker" and then hover down vertically to "really dark green". Here's a visul. Mouse movement is visualized by the red arrows:

But what if the user wants to diagonally go from "green" straight to "really dark green" without scrolling horizontally first? Here's a visual of the desired behavior:

This causes the mouse to leave "green" and as a result the menu collapses and disappears altogether. so how can this be fixed?

I tried increasing the timeout on mouseleave, but then another problem arises: If you wanted to go from green straight to "really dark green" on the way there you would hover over "red" and possibly "purple" too. What if "red" also had children? then mousing out of "green" and onto "red" will display the submenu for "red" as well and then you will have more than 1 3rd level menus open at the same time, which looks awful.

Hope all of that makes sense!

Thank you.

Answer 1

$(document).ready(function() {
    $("ul.nav li").hover(function() { //When trigger is hovered...
        $(this).children("ul.sub").stop(true).slideDown();
    }, function() {
        $(this).children("ul.sub").stop(true).slideUp();
    });
});

this solved my issue

Answer 2

have you considered using doormat instead? Using a multi-layer navigation is not a wise idea and it has many usability issues.

That's the ideal behavior that you want. Onmouseout, you want the element to disappear, otherwise it will persist in there.

Check the doormat menu on ibm website, I am sure you will love it.

http://www.ibm.com/us/en/