Parent menu link opens children when clicked, instead of going to link (Drupal)

Question

I have created a Menu in Drupal and the structure look like this:

A parent link with children. In my website it looks like this:

Note that "products" takes you to /products. However, when I click on it, it just opens the children menu links:

Instead of taking me to /products, it justs expands. The structure of the menu is such:

<li class="expanded dropdown open">                                                                            
      <a href="/products" class="dropdown-toggle" data-toggle="dropdown" data-drupal-link-system-path="node/370" aria-expanded="true">Products <span class="caret"></span></a>
      <ul class="dropdown-menu">
          <li class="first">
              <a href="/product/inconcert" data-drupal-link-system-path="node/362">InConcert</a>
          </li>
          <li>
              <a href="/product/voicempower" data-drupal-link-system-path="node/363">VoiceMPower</a>
          </li>
          ....
     </ul>
</li>

As I can Imagine, the problem is that the <li> gets triggered when I click on it, instead of the <a> that is inside.

How can I fix this issue? Maybe it is possible to open the menus on hover, and when I click to take me to the link??

Answer 1

I finally worked it out. I just needed to edit the menu.html.twig file from Bootstrap's templates. I just removed data-toggle from the setAttribute() function as so:

From:

{% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}

To:

 {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('', 'dropdown') %}

This removed the opening of the dropdown. And the next step was to open the dropdown by hovering. This was relatively easy, I just put this CSS code:

li.dropdown:hover > ul.dropdown-menu {
  @media (min-width: 979px) {
    display: block;
  }
}

I don't know if this is the best or correct way to do it, but for me it worked.