Orchard Navigation - how to make menu link not clickable - orchardcms

Question

I have following menu navigation:
home
product
product 1
product 2
news
press releases
about us
Every menu item above links to a Content, except "product".I need to make it so when the user click "product" would not go anywhere.
I tried to use "Custom Link", and enters "#" or "javascript:void(0)" in the url, however that does not work since Orchard always prefix the url with "/".
Also, I tried to use "Html Menu Item" and enter "product" in the html body, but always rendered as
<li><span class="raw"><p>product</p></span><ul>...</ul></li>
I want either following:
<li>product<ul>....</ul></li>
or
<li>product<ul>....</ul></li>
Is there an easy way to do this?

Answer 1

In the Menu.cshtml file under the Core->Shapes->Views directory in the Orchard.Web project, you could do this:
$(document).ready(function () {
$("#Nav a").click(function(e) {
e.preventDefault();
});
});
The above disables clicking on all of your menu links, so if you want to prevent clicking on the second level menu items:
$('#Nav li ul li a').click(function(e){
e.preventDefault();
});
That Menu.cshtml file is the view for your navigation menu, so you can define it's behavior as you wish there. You can look at this answer of mine as well.

Answer 2

You may do as Mohammad says, but create an alternate Menu.cshtml in your Theme. It is bad practise to modify Orchards core code.