在导航引导解释中隐藏子菜单
Posted
技术标签:
【中文标题】在导航引导解释中隐藏子菜单【英文标题】：Hiding Sub Menus In A Navigation Bootstrap Explanation [duplicate] 【发布时间】：2021-11-14 03:13:14 【问题描述】：我正在寻找有关 CSS 选择器如何工作的解释，以便仅在将鼠标悬停在该子菜单的父元素上时才显示子菜单。据我了解，有一个使用 :hover 和 CSS display 属性的纯 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/
【问题讨论】：
display: hidden 不是一个东西。
这是我的错误，应该是display: none 会隐藏我认为的元素
【参考方案1】：
它是如何工作的：
折叠 javascript 插件用于显示和隐藏内容。 按钮或锚点用作映射到特定的触发器 您切换的元素。 折叠元素会为高度设置动画 从当前值变为 0。 鉴于 CSS 处理动画的方式，您 不能在 .collapse 元素上使用填充。相反，使用类作为 一个独立的包装元素。
Bootstrap Collapse
【讨论】：
以上是关于在导航引导解释中隐藏子菜单的主要内容，如果未能解决你的问题，请参考以下文章