I am looking for an explanation on how the CSS selectors work to make it so that the Sub Menu is only shown when the parent element for that Sub Menu is hovered over. To my understanding there is a pure CSS solution for this with the use of :hover and the CSS display property however I do not understand how to use the two together to make the sub menu do what I want it to do. I have a hunch that the .dropdown-menu class is overwriting the display:hidden within the CSS for the submenu.
I have tried adding in some CSS in the selector .navbar .nav-item .submenu { display: hidden; position: absolute; left:100%; top:35px;} to hide the Sub Menu in the navbar. Once the Sub Menu is hidden I should be able to just show it again by using :hover on the parent element but I am unsure which element that would be as I have tried a mix of CSS selectors with no avail.
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body style="">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> People </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Professional Institutions</a></li>
<li class="dropdown-submenu">
<li><a class="dropdown-item text-white" href="#">My New Drop Down</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Sub Area 1</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 2</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 3</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Products </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> Actuation Systems</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Knowledge </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> A S Knowledge</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Policy Deployment </a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Processes And Procedures </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#"> Quality Management System</a></li>
<li><a class="dropdown-item text-white" href="#"> Buissness Management System </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<style>
@media all and (min-width: 1200px) {
.nav-link {
font-size: 25px
}
.navbar .nav-item .dropdown-menu {
display: hidden;
font-size: 20px
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
background: rgba(66, 66, 66, 0.4)
}
.dropdown-menu>li:hover {
background-color: black
}
.dropdown-menu .dropdown-item:hover {
background-color: black;
}
.navbar .nav-item .submenu {
display: hidden;
position: absolute;
left: 100%;
top: 35px;
}
}
</style>
</body>
</html>
Here is the code again: https://jsfiddle.net/p0etz8jg/
