Adding
data-toggle="dropdown"
to the link ensures that the dropdown menu appears when you click the link. It prevents the browser from following the link, since this would prevent you from seeing the dropdown menu.
The simplest solution is to add the link to the dropdown menu as well:
<li class="nav-item dropdown">
<a class="nav-link active dropdown-toggle" href="products.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
<a class="dropdown-item" href="products.html">All products</a>
<a class="dropdown-item" href="cattle.html">Cattle</a>
<a class="dropdown-item" href="hay.html">Hay</a>
</div>
</li>