Question

My company has a custom build wordpress child theme that uses a small jquery script to display the sub nav, then fades out after a second or two. Currently it will only display the sub nav listed horizontally, but I will be transitioning it into a more traditional nav that allows for a tertiary menu.

You can see our current nav here

I have successfully transitioned my css to list vertically on my test site, but the jQuery script is incorrectly showing the tertiary nav (grandchildren) at the same time as the sub-nav (children) when the main-nav’s parent is hovered.

Anyone know what I need to change/add to this script to display the grandchildren only once the designated child has been hovered?

    <script type='text/javascript'>
        jQuery(document).ready(function($){
            var lastopen = null;
            var timeout = null;

            jQuery("#access ul li ul").show();
            jQuery("#access ul li ul li").hide();

            function showmenu(element)
            {
                element.css("background","url('/var/www/wp-content/themes/GreatWall/images/arrow.png') no-repeat bottom");
                var children = element.find("ul li");
                children.show();
            }

            function hidemenu(element, fade)
            {
                element.css("background","transparent");
                var children = element.find("ul li");
                fade = typeof(fade) != 'undefined' ? fade : false;
                if(fade)
                {
                    children.fadeOut(300);
                }
                else
                {
                    children.hide();
                }
            }

            jQuery("#access ul li").each(function(i,v){
            jQuery(v).mouseover(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} if(lastopen != null){hidemenu(lastopen);} lastopen = jQuery(this); showmenu(lastopen);});
            jQuery(v).mouseout(function(e){if(timeout != null){clearTimeout(timeout); timeout = null;} timeout=setTimeout(function(){hidemenu(lastopen, true); lastopen = null;},1500);});
            });

            //jQuery("#access ul li ul").css("display", "block");
            //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left+jQuery(v).width()/2-width/2; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
            //jQuery("#access ul li").each(function(i,v){var width = 0; jQuery(v).find("ul li").each(function(ii,vv){width += jQuery(vv).width();}); var mid = jQuery(v).position().left; jQuery(v).find("ul li:first").css("margin-left", Math.min(Math.max(0, mid), 940-width));});
            //jQuery("#access ul li ul").css("display", "none");
        });

        </script>

and here is the child theme’s css for the navigation:

#access ul li:hover > ul {
    display: none;
}  

ul#menu-nav li a:hover{
    background:transparent;
}

#access{
    background:#FFF;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    margin:0 auto;
    background:#081B39;
    background-image: linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -o-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -moz-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -ms-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.48, #081B39),
    color-stop(1, #183563));
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

#access ul{
    margin:0;
}

#access li{
    position:relative;
}

#access div{
    margin:0;
}

#access a{
    color:white;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    padding:0 12px;
    cursor:pointer;
}

#access li:hover > a, #access a:focus{
    background:none;
    color:#4bb96a;
}

#menu-nav li.current-menu-item a{
    font-weight:normal;
    color:#4bb96a;
}

#access .current_page_item > a, #access .current_page_ancestor > a {
    font-weight:normal;
}





/*-------------------------------------  SUB-NAV STYLING  -----------------------------------------------------*/

/*li#menu-item-185 ul.sub-menu > :first-child{
    margin-left:20px;
}*/

ul.sub-menu{
    margin: 0;
    padding: 0;
    text-align: center;
}

/*ul#menu-nav li a:hover{
    background:url(images/arrow.png) no-repeat bottom;
}*/

ul#menu-nav li#menu-item-144 > a:hover, ul#menu-nav li:hover#menu-item-144 > a{
    background:none;
}

.sub-menu li{
    display:block;
}

.sub-menu li a{
    color:#FFF !important;
}

ul.sub-menu li.current_page_item a{
    color:#FFF !important;
    font-style:italic !important;
}

#access ul ul{
top:38px;

    background:#081B39;
    background-image: linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -o-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -moz-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -ms-linear-gradient(bottom, #081B39 48%, #183563 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.48, #081B39),
    color-stop(1, #183563));
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

#access ul ul a {
    border-bottom:none;
    color:#FFF;
    padding: 10px 8px;
    text-align:left;
    background:transparent;

    font-size: 12px;
}

#access ul ul :hover > a {
    background:transparent;
    text-decoration:underline;
    color:#4bb96a !important;
}

Thanks for taking a look!

Answer 1

Your children are just the li’s of any direct descendants (children) of the current element. So in jquery long form, your var children query in showmenu that would be: var children = element.children('ul').children('li') This should get you what you want — or at least get you on the path! The query you had was finding all descendants, not just direct descendants, of the current element, which is why your third-level menu items were being shown.

If you can post the live example somewhere (jsfiddle, or a live demo link) then it’ll be easier to give you more support. But I think this should do it.