Skip to main content

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    
    $("#navigation li:has(ul.sub-navigation)").hover(function () {
      $(this).children("a").click(function () {
          return false;
      });
    });
    
  });
  </script>
</head>
<body>
  <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>
</body>
</html>