I am facing a scenario where I need to redirect the parent menu to a link instead of displaying the sub-menu. Currently, I am using Slick Menu http://slicknav.com/
It makes sense that the parent menu should not be linked to show the child menu on mobile devices. On desktop versions, we can utilize hover effects to display sub-menus, and clicking on the parent menu can also open the link. However, on small screens, we need to decide whether to open the link or show the submenu.
My current issue is in the fiddle example (http://jsfiddle.net/y1dLdd1f/1/) where I have linked Parent 1 menu to google.com, but the script is preventing this action. How can I unblock it so that when a user clicks on it, the page opens instead of showing the sub-menu if the parent menu has a valid link?
<ul id="menu">
<li><a href="http://www.google.com">Parent 1</a>
<ul>
<li><a href="#">item 3</a></li>
<li>Parent 3
<ul>
<li><a href="#">item 8</a></li>
<li><a href="#">item 9</a></li>
<li><a href="#">item 10</a></li>
</ul>
</li>
<li><a href="#">item 4</a></li>
</ul>
</li>
<li><a href="#">item 1</a></li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
<li><a href="#">item 7</a></li>
</ul>
</li>
</ul>