Bootstrap: Need dropdown menu parent link in navbar to open the submenu on hover and lead to <a href="/example-page"> on click

[jeremykieran]

I am having issues with the dropdown navigation menu.

Problem is that currently to allow the dropdown js to work, the parent link of the dropdown menu is marked up has to either be marked up as:

<a class="dropdown-toggle" data-toggle="dropdown" href="/example-page" data-target="#">
or
<a class="dropdown-toggle" data-toggle="dropdown" href="/example-page/#">

However, I need the parent link to lead to it's href on-click! When the dropdown js is enabled on the menu, the parent link needs to be clicked to open the submenu and this probably conflicts with the on-click hyperlink function of the parent.

I need to know if it's possible to open the submenu by hovering over the parent link instead...so that clicking the parent link can be used as a link itself.

[richardp-au]

Read @markdotto's blog post Designing dropdowns in Bootstrap which explains the functionality.

[jeremykieran]

Thanks for the reference!

However, is there a way to tweak the js from its current onclick trigger to an onmouseover one?

[mdo]

There is, and it's in some previous issues here, but nothing in the BS core for it.

Search around a bit and you should be able to find it. It's a matter of changing the CSS to account for :hover instead of .open in dropdowns.less.

[jeremykieran]

Yea the workaround this was very simple. Just had to use :hover selectors to trigger the display:none to display:block and the js file didn't require any tweaks at all.

[bipin-xit]

But the parent link is not clickable even after applying the same fix? Is any idea how to make it clickable?

[codecahill]

Just add "disabled" as a class on your anchor:

    a class="dropdown-toggle disabled" href="http://google.com"