Show submenu's submenu on submenu hover only

Question

I am trying to show the submenu on hovering the menus. I have succeeded in submenu level 1. But when I go to submenu level 2(ie, submenu of submenu) it is not working. I wan

Answer 1

Use mouseenter and mouseleave events if you want them to be triggered when you hover on the sub-elements.

$('.nav ul').hide();

$('.nav li').mouseenter(function() {
    $(this).children('ul').stop().slideDown('slow')
}).mouseleave(function() {
    $(this).children('ul').stop().slideUp('slow')
});

Answer 2

as far as i understood you want to slidedown the submenu on hovering the list item one level above

<ul class="submenu">
    <li><a href="#">Working With Us</a></li>
    <li><a href="#">Work Culture</a>
        <ul class="submenu">
            <li><a href="#">Benefits</a></li>
        </ul>
    </li>
</ul>

i added the submenu class to all elements i want them to be initially hidden. then i made some modifications on the jquery code to work with all submenus

$('ul.submenu').hide();
$('ul.nav > li, ul.submenu > li').hover(function () {
if ($('> ul.submenu',this).length > 0) {
    $('> ul.submenu',this).stop().slideDown('slow');
}
},function () {
    if ($('> ul.submenu',this).length > 0) {
        $('> ul.submenu',this).stop().slideUp('slow');
    }
});

hope this will work for you see http://jsfiddle.net/U7mqM/

Answer 3

jQuery(function(){
            topNav = jQuery('ul.topnav > li > a');
            if(jQuery(topNav).hasClass('hover')){
                        return
            }
            jQuery(topNav).hover(function(){
                    jQuery(this).addClass('hover');
                    jQuery(this).next('.subnav').slideToggle('', function(){                        
                        jQuery(topNav).removeClass('hover');
                });
            });
        });