Clicking MvcSiteMap Parent Node Toggles DropDown But Does Not Navigate to URL

Question

I have a MvcSiteMap with a MvcSiteMapNode parent that contains child nodes. The parent node has a url and the children nodes have urls. When displayed, when the mouse hovers over the parent node, the child nodes appear below it, however when the parent node is clicked, the child nodes disappear but the webpage does not navigate to to the url of the parent node.

<mvcSiteMapNode title="Im a Parent" url="~/ParentUrl" >
  <mvcSiteMapNode title="Im Child 1" url="~/ChildUrl1" />
  <mvcSiteMapNode title="Im Child 2" url="~/ChildUrl2" />
</mvcSiteMapNode>

What is causing the page not to navigate?

Edit (example with pictures):

My assumption is that the click event is being hijacked to make the child node dropdown disappear and not being passed on

Hovering over parent node before click:

After click, dropdown disappears, no navigation to "~/ParentUrl"

Answer 1

This really doesn't have anything to do with MvcSiteMapProvider, but it is probably related to how Twitter Bootstrap functions (assuming you are using Bootstrap). Twitter Bootstrap is designed to work with touch devices, so by default the main link is not clickable (since touching it should open the menu, not navigate to the link).

But someone came up with a hack to get it working, assuming you don't want to support touch devices.

I suggest you re-think your design, since touch device support is very important these days. One possible solution would be to use 2 links - one (with a down arrow) to open the menu, and one to navigate to the link.

Note that you can modify the templates in the /Views/Shared/DisplayTemplates directory to output any HTML/CSS you need to get this working as described here.