<template id="custom_submenu" inherit_id="website.submenu">
<xpath expr="//li[2]/a[1]" position="replace">
<a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'}" data-toggle="dropdown" t-att-href="submenu.clean_url()">
<span t-field="submenu.name"/>
</a>
</xpath>
</template>

Thanks for the quick answer and solution.

Technically, it worked as described. The correct link now appears on the Top Menu item.

However, when it's clicked - it does not direct to the page. Logically this is correct when the "On Click" option is enabled.
When "On Hover" option is enabled, It would be good to allow the link to be clicked to go to the page.

any thoughts if this could be tweaked?

Many Thanks!

Hello,

You need to handle "click" events on the website menus.
You need to handle down "arrow" and menu "label", On click of the arrow the sub menus will be displayed and On click of menu label the URL Link should be redirected.

Hello,
After inheriting the base website sub-menu template and changing the code as Jainesh mentioned, you need to go to the theme tab in the website editor, scroll down to Website settings section, click on "</body>" button beside the code injection field, and there add the following code:

<script>
var productLinks = document.querySelectorAll('a[href="/product"]');
if (productLinks .length > 0) {
productLinks .forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the default link behavior
window.location.href = link.getAttribute("href");
});
});
}
</script>

Thank you for giving the idea