У меня есть код HTM, и я использую CSS, jQuery Bootstrap 4 с ним. Я пытаюсь создать выпадающее подменю при наведении курсора в моем главном меню. По какой-то причине я не могу заставить работать раскрывающееся подменю. Если я наведу курсор на главное меню, такое как Курс, Текстовая книга и Автомобиль, я хочу, чтобы подменю отображалось под главным меню. Если я удаляю bootstrap .min. css, div объявления-контейнера и div custom-menu-container тоже, он работает без проблем, а если присутствует bootstrap и другие элементы меню, он не работает Работа. И мне действительно нужно bootstrap и те другие меню тоже. Любая помощь, как заставить это работать, пожалуйста. Я использую Bootstrap 4. Для главного меню и подменю я хочу, чтобы результат выглядел как на рисунке ниже. 
Ниже приведен код
: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;
}
*:focus {
outline: 0;
}
textarea:focus, input:focus {
outline: none;
}
a {
text-decoration: none;
color: inherit;
}
/*-----------------------
/* New Css Added */
/*----------------------- */
.container-fluid.wrapper {
flex-direction: column;
padding-bottom: 0px;
}
.logo{
color: #000;
display: block;
height: 50px;
margin-right: 5px;
overflow: hidden;
padding-top: 0;
background-size: cover;
}
.announcement-container {
background: pink;
margin: 0;
padding: 5px 0 0 0;
font-size: 16px;
}
.announcement-container h5 {
font-size: 16px;
color: #FFF;
font-family: sans-serif;
}
.row.nav-container {
margin-top: 1rem;
}
.form-container,
.custome-menu {
text-align: center;
}
.col-md-6.form-container {
padding-right: 0px;
padding-top: 2px;
}
.search-product input {
border-bottom: 1px solid #000 !important;
min-width: 220px;
}
.col-md-6.form-container:hover .search-product input{
width: 300px;
}
.col-md-6.custome-menu {
word-spacing: .5rem;
padding-left: 0;
padding-top: 5px !important;
}
.text-center a {
color: #000;
}
.col-md-6.custome-menu .fa-a{
margin-left: .5rem;
}
/*----------------------------
/* Main menu and submenu */
/*---------------------------- */
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item {
color: #000;
text-decoration: none;
display: inline;
overflow: hidden;
}
.dropdown {
float: left;
}
.nav-item .dropdown-content {
background-color: red;
color: #000;
float: left;
position: absolute;
display: none;
z-index: 2;
left: 0;
top: 60px;
width: 100% !important;
}
.nav-item .dropdown-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.nav-item .dropdown-content a {
display: inline !important;
}
.nav-item:hover {
color: #FFF;
background: red !important;
}
.nav-item:hover a {
color: #FFF !important;
}
.navbar-nav li:hover .dropdown-content {
display: block;
}
.navbar-nav .dropdown-content a:hover {
text-decoration: underline;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.wrapper {
text-align: center;
justify-content: center;
background: #FFF;
}
<!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 class="col-md-4">
<a href="" class="logo">LOGO
</a>
</div>
<div class="col-md-8 custom-menu-container">
<div class="row">
<div class="col-md-6 form-container">
<form class="search-product" action="search" method="get" role="search">
<input type="text" name="s" id="search_value"
class="" placeholder="Enter keyword" autocomplete="off" value="">
<i class="fas fa-search" aria-hidden="true"></i>
</form>
</div>
<div class="col-md-6 custome-menu">
<a href="#" class="">Create Account</a> /
<a href="" class="">SignIn</a>
<a href="" class="fa-a"><i class="fas fa-shopping-bag" aria-hidden="true"></i></a>
<a href="" class="fa-a"><i class="fas fa-heart" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<div class="dropdown">
<a class="nav-link" href="#">Course<span class="sr-only">(current)</span></a>
<div class="dropdown-content">
<a href="#">Web design</a>
<a href="#">Science</a>
<a href="#">Python</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TextBook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Car</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid">
<div class="col-md-12">
<p>Other text and content will be here</p>
</div>
</div>
</body>
</html>
Для подменю я хочу