Description: I am currently working on designing a navbar using the Bootstrap 4 framework. The issue I am facing is that when trying to implement a custom dropdown menu, it appears within the main menu bar instead of outside it. As a result, the height of the main menu bar increases. How can I display a sub-menu outside the main menu bar?
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> *{
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: auto;
height: 100%;
}
ul li{
margin: 0;
/* border: 1px solid turquoise; */
width: 9em;
padding: 5px 0;
text-align: center;
position: relative;
}
/* Showing border bottom animation for the main-menu */
ul li::after{
content: '';
position: absolute;
border-bottom: 3px solid #f3007f;
transform: scale(0, 1);
transition: transform .5s ease;
width: 100%;
left: 0;
}
ul li:hover::after{
transform: scale(1, 1);
}
/* Showing background: black and font color:white when hovering over the main-menu */
ul li a {
display: block;
color: white;
}
ul li a:hover{
background-color: black;
color: white;
}
.logo {
width: 4vw;
}
/* Styling the main menu */
.navbarbg {
background: #10044a;
color: white;
font-weight: bold;
}
/* Centering the main-menu elements */
.listpos{
justify-content: center;
}
/* This code is for hiding sub-menus */
ul li ul li {
display: none;
}
/* This code is for showing sub-menus when hovering over main menu */
ul li:hover ul li {
display: block;
color: white;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f3e31b33a9.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbarbg">
<div class="col-md-2">
<img src="./images/ICC-Mens-T20-World-Cup-2021.jpg" class="img-fluid logo" alt="">
</div>
<div class="collapse navbar-collapse col-md-8 listpos">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Matches</a></li>
<li class="nav-item"><a class="nav-link" href="#">Standings</a></li>
<!-- This is the dropdown code Starting -->
<li class="nav-item">
<a class="nav-link">Dropdown</a>
<ul class="" aria-labelledby="navbarDropdown">
<li><a class="" href="#">Action</a></li>
<li><a class="" href="#">Another action</a></li>
</ul>
</li>
<!-- This is the dropdown code Ending -->
<li class="nav-item"><a class="nav-link" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Videos</a></li>
</ul>
</div>
<div class="col-md-2 text-right">
<b>Search</b>
<span class="ml-1">
<i class="fa-solid fa-magnifying-glass"></i>
</span>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>