Skip to main content
Home / Code Snippets / jQuery Code Snippets / Disable Parent Links in Nested List Navigation

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>
icon-link icon-logo-star icon-search icon-star