Attempting to create a mega menu using Bootstrap. Started with dropdown menu code and made some modifications, but encountering issues where the links in the dropdown don't work properly unless opened in a new tab. When clicking on a link, it closes the dropdown instead of navigating to the page. Suspect there might be an issue with the class or JavaScript, but unsure.
#logo{
/* CSS styles */
}<!DOCTYPE html>
<html>
<head>
<!-- External Stylesheets -->
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<!-- Mega Menu Items (Start) -->
<!-- Dropdown Element 1 -->
<!-- Dropdown Element 2 -->
<!-- Dropdown Element 3 -->
<!-- Dropdown Element 4 -->
<!-- Mega Menu Items (End) -->
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<!-- External Scripts -->
</body>
</html>