Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover.
Within the head tag, the following scripts are included:
<!--Jquery-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"> </script>
<!--Bootsrap-->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
Below is the Navbar code:
<nav class="navbar fixed-top navbar-expand-lg navbar-transparent"><a class="navbar-brand"
href="#">MAUZO SUPERMARKET</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-toggle-icon"></span></button>
<div class="navbar">
<a href="index.html" active>Home</a>
<div class="dropdown">
<button class="dropbtn">Stores
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Clothing</a>
<a href="#">Foodstuff</a>
<a href="#">Electronics</a>
<a href="#">Furniture</a>
</div>
</div>
<a href="#">Blog</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</nav>
<!--end of navbar-->