How to keep the Parent menu hovered while the mouse is in child menu in a Dropdown Menu

Question

Hi guys i wonder how to keep the parent menu hovered while moving mouse in the submenus.

I'm a beginner in jQuery and I like you to help me with some tip/suggestion.

jQuery Code

// Navigation Slide //
var navHover = function () {
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing')
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing')
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing')
}
var navRelease = function () {
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing');
}

$('#navInside a.topLevel').hover(navHover, navRelease);


// Dropdown animation       
            function mainmenu(){
            jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix
            jQuery(" #navInside li").hover(function(){
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500);
                    },function(){
                    jQuery(this).find('ul:first').css({visibility: "hidden"});
                    });
            }

             jQuery(document).ready(function(){                 
                mainmenu();
            });

Navigation HTML

<div id="navInside">
<li><a class="topLevel" href="">Home</a></li>
<li><a class="topLevel" href="">Options</a>
    <ul>
      <li><a href="">Submenu 1</a></li>
      <li><a href="">Submenu 2</a></li>
    </ul>
</li>
<li><a class="topLevel" href="">Thanks</a></li>

nice menu! could you post the relevant html, css, and jQuery here or as a fiddle so we can better help you? — Sebastian Patane Masuelli, Nov 29 '10 at 18:06

score 1 · Accepted Answer · answered Nov 29 '10 at 18:33

The problem is that your top-level hover is on the <a> element. Moving to a submenu results in the mouseleave event firing on the <a> element since the submenu elements are not children of the <a>, but of the <li>. Try this instead:

$('#navInside a.topLevel').parent().hover(navHover, navRelease);

BTW - You can simplify your navHover/navRelease code by using the $(this) within the hover functions. That way you don't need specific ids on the elements. You would just find them relative to the current element.

Thanks for answer, I got a little problem but moving the id got it fixed ^^ — Omegakenshin, Nov 29 '10 at 20:05

score 0 · Answer 2 · answered Nov 29 '10 at 18:41

You don't need JS for this at all. Here's the jsFiddle for the explanation below:

You want to show a ul that is the child of an li only when you're hovering over it. That is handled by li ul (mouseout state) and li:hover ul (mouseover state).

When you hover over it, the height of the LI changes because you're now displaying the UL as well, so it will stay visible as long as you don't leave its (LIs) area (which includes its text + UL).

If you want some animations, look at CSS transitions. Browser support is spotty, but maybe what you're trying to do will be supported universally. Accurately judging mouseover/out events on elements whose area is changing can be tricky. I'd recommend using JS only if you really need to for something like this.

the problem is with the animation of the green sliders – Omegakenshin Nov 29 '10 at 19:48 — Omegakenshin, Nov 29 '10 at 19:48

How to keep the Parent menu hovered while the mouse is in child menu in a Dropdown Menu

2 Answers2