我正在寻找关于CSS选择器如何工作的解释，以便子菜单仅在子菜单的父元素悬停时显示。据我所知，有一个纯粹的CSS解决方案，使用悬停和CSS显示属性，但我不明白如何使用这两个一起使子菜单做我想做的事。我有一种预感，.dropdown-menu类在子菜单的CSS中覆盖了display:hidden。
我已经尝试在选择器.navbar .nav-item .submenu { display: hidden; position: absolute; left:100%; top:35px;}中添加一些CSS来隐藏导航栏中的子菜单。一旦子菜单被隐藏，我应该能够通过在父元素上使用:hover再次显示它，但我不确定哪个元素会是，因为我已经尝试了混合CSS选择器，但无济于事。
下面是页面的代码:
<!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>
下面是代码:https://jsfiddle.net/p0etz8jg/
工作原理:
JavaScript插件是用来显示和隐藏内容的。按钮或锚点用作映射到特定对象的触发器你切换的元素。折叠一个元素将使高度动画化考虑到CSS处理动画的方式，您不能在.collapse元素上使用填充。相反，使用类as一个独立的包装元素。
引导崩溃