After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated with preventDefault(). To resolve this issue, I need to separate this behavior and allow the submenu links to be followed normally.
<html>
<head>
<style type="text/css">
#content ul {margin:0;}
#content ul li {float:left; background:#000; list-style:none;}
#content ul li a {display:block; text-decoration:none; padding:10px 40px;}
#content ul li ul {position:absolute; padding:0;}
#content ul li ul li {float:none; background:#ccc;}
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li>
<a href="#">3</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">4</a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
$('#content ul li').has('ul').click(function(e) {
/* code to show/hide submenus */
console.log(e);
e.preventDefault();
});
</script>
Edit: My goal is to make all top level links and submenu links functional while only manipulating the behavior of the top-level list items with submenus.