Take the 2-minute tour ×

I'm having an interesting jquery issue. Essentially I need a sticky submenu to get hidden when I hover over another parent to reveal a submenu, and then re-appear when i am not hovering over another parent with a submenu. This all works fine, the issue is that when I hover over a child li in my sticky submenu the submenu flips out, flashing between being displayed and not being displayed. It seems that my jquery is being inherited by the child li? anyway here's the code:


.current-menu-parent ul{
#primary-nav ul li:hover ul {
#primary-nav ul li > ul{


  $(".current-menu-parent ul").show()
  $("#primary-nav > ul.menu li").mouseover(function(){
    $(".current-menu-parent ul").hide();
  $("#primary-nav > ul.menu li").mouseout(function(){
    $(".current-menu-parent ul").show();


<div id="primary-nav">
  <ul class="menu">
    <li class="current-menu-parent">This is the current menu parent item
            <li>Current page</li>
share|improve this question
Here is a fiddle of what's in the question jsfiddle.net/CBpHg –  Huangism Jul 10 '12 at 20:54

3 Answers 3

up vote 0 down vote accepted

You need to apply Andrew's answer and add this:

$(".current-menu-parent ul").mouseover(function(e){



See full fiddle jsfiddle.net/CBpHg/1/


To explain this a little bit, when you hover over the li at the lowest level, the hover event bubbles up all the way to parent with the hide function which is why the menu disappears. So we use stopPropagation on the ul to prevent it from going any further. You could use it on the lowest level of li as well.

share|improve this answer
YES. thanks for the help! been banging my head against the wall with this one. –  codeprokanner Jul 10 '12 at 21:17

It's because the second part of your selector, ul.menu li, applies to ALL lis contained in ul.menu. You may want to use a ul.menu > li instead to make it so that the event will only fire when hovering an li that's a direct child of ul.menu.

share|improve this answer
thank you for your contribution! –  codeprokanner Jul 10 '12 at 21:18
$("#primary-nav > ul.menu li").hover(function() {
}, function() {

This way it will show/hide any ul children of li. It works to your problem.

share|improve this answer
this works for the most part, but when a submenu li is hovered and then the mouse moves out the ul disapears. –  codeprokanner Jul 10 '12 at 21:09

Your Answer


