I am facing an issue where the text remains a link and the dropdown toggle works, but it is causing Dropdown-2 to open when I click on Dropdown-1. Only Dropdown-1 seems to be working properly.
I can't seem to figure out why only Dropdown-1 opens no matter which dropdown I click on.
My code is using Bootstrap 4.4.1
You can view the Pen here https://codepen.io/cr8tivly/pen/MWavBJr
This is the markup:
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="row row-cols-4 navbar-nav main relative list-unstyled col-6">
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-1</a>
<ul class="dropdown-menu">
<li>item-1-one</li>
<li>item-2-one</li>
<li>item-3-one</li>
<li>item-4-one</li>
</ul>
</li>
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-2</a>
<ul class="dropdown-menu">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</li>
<li class="col"><a href="#">Three</a></li>
<li class="col"><a href="#">Four</a></li>
</ul>
</nav>