My HTML code includes CSS, jQuery Bootstrap 4 elements. I am attempting to add a dropdown submenu to my main menu when hovering over it. However, I am facing issues in getting the dropdown submenu to work properly. When I hover over main menu items like Course, TextBook, and Car, I want the submenu to appear below the main menu. Interestingly, the dropdown submenu works fine when I remove bootstrap.min.css, announcement-container div, and custom-menu-container div. But I need to include Bootstrap and the other menu elements as well. If they are present, the dropdown submenu doesn't work as expected. Can you provide any guidance on how to resolve this issue? I am using Bootstrap 4. The desired outcome for the main menu and submenu should resemble the image in this link: https://i.sstatic.net/2L4Qo.png
Below you can find the code snippet:
:root {
--background-color: #FFF;
--button-bg: #FFF;
--secondary-bg-color: #F6F5FA;
--fontfamily: 'Ibarra Real Nova', serif;
--cormorant: 'Cormorant Garamond', serif;
}
* {
border: none !important;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
padding: 0;
margin: 0;
}
...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" href="Lib/fontawesome-5/css/all.css">
<link rel="stylesheet" type="text/css" href="HTest.css">
</head>
<body>
<header>
<div class="container-fluid wrapper p-0">
<div class="row announcement-container">
<div class="col-md-12"><h5>Some text here</h5></div>
</div>
<div class="row nav-container">
...
</div>
</div>
</body>
</html>The desired appearance of the submenu should be similar to the provided image.