href doesn't work on Drop Down with bootstrap 4 (SOLVED)

Question

I made a drop-down menu with bootstrap 4 and also change it into hover. Everything works great, but I cannot link properly through the href.

When I click "PRODUCTS", it doesn't switch to third.html. How can I fix it? SOLUTION

Also, how to remove the original click action since I already have the hover one? SOLUTION

Here's my HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >HOME <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./second.html">ABOUT</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="./third.html"
              id="navbarDropdownMenuLink"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              PRODUCTS
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#ch1">A</a>
              <a class="dropdown-item" href="#ch2">B</a>
              <a class="dropdown-item" href="#ch3">C</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./fourth.html">EQUIPMENT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./fifth.html">CONTACT</a>
          </li>
        </ul>
      </div>
    </nav>

CSS:

.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

Thanks!