Here’s a simple way to show a sub-menu when it’s parent is hovered over. This uses jQuery and was used for WordPress. It works with multiple layers of sub-menus. This assumes that your sub-menu starts out ‘hidden’ via your css file. i.e. “.sub-menu { display: none; }”

/* navigation sub-menu display */

// Change 'hover' to 'click' if you want to
$('.nav li > .sub-menu').parent().hover(function() {
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
} else {

See the Pen Show/Hide sub-menu items with jQuery by William (@bigwilliam) on CodePen.

4 responses to “Simple sub-menu show / hide in WordPress with jQuery

  1. Hi

    I like the look of this bit of JQuery but I can’t get it to work. Do you have a demo somewhere?


    1. Sorry, I don’t have an example up at the moment. I created one just now:

      I’ll also add an HTML snippet to this so you can see what the markup should look like.

      edit: moved this to Article has been updated above.

Leave a Reply

Your email address will not be published. Required fields are marked *