I am currently developing a website that requires 15 HTML files. I have created a navbar with 3 direct links nav-items and 2 dropdowns. How can I make the dropdown menu appear on hover instead of click, and navigate to the dropdown href link when clicked?
I attempted to use the nav-item class with the dropdown-menu class, but it did not work as expected.
Here is the code for my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="img/logotxt.png" width="150"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto text-uppercase font-weight-bold small">
<li class="nav-item mr-3 pr-3 border-right active">
<a class="nav-link p-0 text-blue" href="index.html">Home</a>
</li>
<li class="nav-item mr-3 pr-3 border-right dropdown">
<a class="nav-link p-0 text-blue dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item small" href="#">Achievements</a>
<a class="dropdown-item small" href="#">History</a>
<a class="dropdown-item small" href="#">Interesting Facts</a>
</div>
</li>
<li class="nav-item mr-3 pr-3 border-right text-blue">
<a class="nav-link p-0 text-blue" href="#">First Team</a>
</li>
<li class="nav-item mr-3 pr-3 border-right dropdown">
<a class="nav-link p-0 text-blue dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Results
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item small" href="#">Spanish League</a>
<a class="dropdown-item small" href="#">Spanish Cup</a>
<a class="dropdown-item small" href="#">Champions League</a>
</div>
</li>
<li class="nav-item text-blue">
<a class="nav-link p-0 text-blue" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>