The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Disable Parent Links in Nested List Navigation

Last updated on:

jQuery code that disables parent links for drop down menus. The menu should be built as nested lists, and the parent link is disabled. This helps eliminate a useless page to display only a list of links to the pages that your dropdown menu already displays.


$("#navigation li:has(ul.sub-navigation)").hover(function () {
     $(this).children("a").click(function () {
        return false;

Reference HTML

<ul id="navigation">
  <li><a href="#your-link-here">Nav 1</a></li>
          <ul class="sub-navigation">
                <li><a href="#your-link-here">SubNav 1</a></li>
                <li><a href="#your-link-here">SubNav 2</a></li>
                <li><a href="#your-link-here">SubNav 3</a></li>
  <li><a href="#your-link-here">Nav 2</a></li>
  <li><a href="#your-link-here">Nav 3</a></li>
  <li><a href="#your-link-here">Nav 4</a></li>


  1. gary

    you should show a working example. I tried it and it does not work. Maybe you are not stating something you consider to be obvious.

  2. Derek Johnson

    @gary could be the #navigation container id and/or the ul.sub-navigation class name.

    If it’s in wordpress you might also need to change the $ to jQuery

  3. michael
    Permalink to comment#


    You do need to make sure you include the jquery library in your site,
    and depending, wrap this in jquery’s document ready

    such as:


    /* code goes here */


  4. Brian
    Permalink to comment#

    I prefer woo themes, less fiddling with the code.

  5. Wedding Video Guy
    Permalink to comment#

    I prefer working with kajabi, all html is taking care of.

  6. kil
    Permalink to comment#

    please tell me where to put the jQuery code in WordPress? which php or css file?

  7. Jose
    Permalink to comment#

    I wish you could put a working example link, to illustrate how it will look. So like me, with no experience would actually know how to use it if they like it

  8. Samantha

    I prefer staying off the internet. Then I don’t have to read painful forum posts.

  9. leo rapirap

    this snippet saved my backside from being kicked!
    Thanks Chris!

  10. thegenesis
    Permalink to comment#

    thanks chris!

  11. Pat Q
    Permalink to comment#

    I think the problem is that the html sample is incorrect; the nested ul should be *inside* the first li, not between the first and second, no?

  12. Antoine Descamps
    Permalink to comment#

    I prefer using e.preventDefault()

  13. luke
    Permalink to comment#

    For wordpress users who are using registered menus:

  14. Bonsai
    Permalink to comment#

    Thanks Luke, that worked for me. Great blog overall!

  15. chris
    Permalink to comment#

    This fixed an issue I was having with mobile safari but is there a way that on a second click that it can go to the link.

    Basically ios used to work like this with my menus (and still does on some of my sites for some reason)

    Any help is really appreciated.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed