Grow your CSS skills. Land your dream job.

Last updated on:

Disable Parent Links in Nested List Navigation

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.

jQuery

$("#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>
          </ul>
  <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>
</ul>

Comments

  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. @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. Permalink to comment#

    @gary

    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:

    $(document).ready(function(){

    /* code goes here */

    });

  4. Permalink to comment#

    I prefer woo themes, less fiddling with the code.

  5. 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. 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. I prefer using e.preventDefault()

  13. luke
    Permalink to comment#

    For wordpress users who are using registered menus:

    jQuery('.sub-menu').parent().find('a:first').removeAttr('href').css('cursor','default');
    
  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

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".