问题：

在导航引导解释中隐藏子菜单[重复]

姜煌

2023-03-14

我想了解CSS选择器是如何工作的，这样子菜单只有在子菜单的父元素悬停时才会显示。据我所知，通过使用：hover和CSS display属性，有一个纯粹的CSS解决方案，但是我不知道如何将这两个属性结合使用，使子菜单达到我想要的效果。我有预感，。下拉菜单类正在覆盖子菜单CSS中的显示：隐藏。

我尝试在选择器中添加一些CSS。导航栏。导航项目。子菜单{显示：隐藏；位置：绝对；左侧：100%；顶部：35px；} 隐藏导航栏中的子菜单。一旦子菜单被隐藏，我应该能够通过在父元素上使用：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/

共有1个答案

酆意智

2023-03-14

它的工作原理：

崩溃JavaScript插件用于显示和隐藏内容。按钮或锚用作触发器，映射到您切换的特定元素。折叠元素将使其高度从当前值变为0。考虑到CSS处理动画的方式，你不能在一个。崩溃元素上使用填充。相反，使用类作为独立的包装元素。

引导崩溃

类似资料：

SFSafariViewController：隐藏导航栏

问题内容：我可以使我的应用程序通过SFSafariViewController自动加载此帖子的网址，并且效果很好，唯一的缺点是导航栏。以这种方式使用SFSafariViewController导航栏时，它是无用的，因为url是只读的，并且“ done”链接除了重新加载页面外不执行任何操作。因此，我想完全隐藏导航栏。根据已接受答案的注释，建议将我的根视图控制器设置为SFSafariViewCo
永久禁用和隐藏Android导航栏/通知菜单

我正在为一所学校开发一个Android应用程序，我想打开这个应用程序，以防止用户在设备上做任何事情，除了我在我的应用程序内提供的东西，我的意思是什么也不做...所以首先导航栏应该被禁用和隐藏我看到了这一点，但它适用于4.4版，它并不能解决问题，因为如果你滑动屏幕，你将返回菜单。（如何在android活动中永久隐藏导航栏？）这也不起作用（在活动中永久隐藏导航栏）（有没有办法在Android IC
Eclipse 导航菜单

主要内容：Eclipse 导航菜单,Open Type,Open Type in Hierarchy,Open ResourceEclipse 导航菜单导航菜单提供了许多菜单项，允许您快速定位和导航到资源。其中，Open Type、Open Type in Hierarchy 和 Open Resource 菜单项往往非常有用。 Open Type Open Type 菜单项会弹出一个对话框，允许您定位 Java 类型。在过滤器文本框中输入完全限定名称或类的名称。'*' 字符代表 0 个或多
NavMenu 导航菜单

为网站提供导航功能的菜单。顶栏适用广泛的基础用法。导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 <el-menu :default-act
NavMenu 导航菜单

NavMenu 导航菜单为网站提供导航功能的菜单。顶栏适用广泛的基础用法。 ::: demo render() { return ( <div> <Menu theme="dark" defaultActive="1" className="el-menu-demo" mode="horizontal" onSelect={this.onSelect.bind(thi
NavMenu 导航菜单

为网站提供导航功能的菜单。顶栏适用广泛的基础用法。 <el-menu [model]="0" (modelChange)="handle($event)" class="el-menu-demo" mode="horizontal"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2" title="我的工

在导航引导解释中隐藏子菜单[重复]

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档