html - 多级下拉菜单无法在悬停和 Bootstrap 上使用

Question

我是 CSS 的新手，正在尝试创建多级下拉菜单。当我点击 Apparel 链接时，它下面的所有内容都会同时打开。我尝试使用 display: none 和 display: block on hover 但是，它不起作用。任何人都可以指导我吗？

ul {
  list-style-type: none
}


.navbar-nav:hover .secondDropdown{
  display:block;
}


.navbar-nav .secondDropdown{
  display:none;
}


.navbarDropdown2{
  display:none;
}


.dropdown:hover .navbarDropdown2 {
  display: block;
}

<ul class="navbar-nav ml-auto">
  <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apparel </a>

    <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
      <li class="dropdown-item dropdown">
        <a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Girls</a>
        <ul class="navbarDropdown2" aria-labelledby="navbarDropdown2">
          <li class="dropdown-item dropdown"><a href="/Apparel/Girls/Shoes/10015">Shoes</a></li>

        </ul>
      </li>
      <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Boys</a>
        <ul class="navbarDropdown2" aria-labelledby="navbarDropdown2">
          <li class="dropdown-item dropdown"><a href="/Apparel/Boys/Pants/10019">Pants</a></li>

        </ul>
      </li>

    </ul>

Answer 1

注意类名，第一个悬停下拉菜单的类名是dropdown-toggle 而不是dropdown

还有代码笔链接 -> https://codepen.io/anon/pen/ReQKJm

ul {
  list-style-type: none
}


.navbar-nav:hover .secondDropdown{
  display:block;
}


.navbar-nav .secondDropdown{
  display:none;
}


.navbarDropdown2{
  display:none;
}


.dropdown-toggle:hover .navbarDropdown2 {
  display: block;
}

.dropdown-item:hover ul{
     display: block;
}

<ul class="navbar-nav ml-auto">
  <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apparel </a>

    <ul class="dropdown-menu secondDropdown" aria-labelledby="navbarDropdown">
      <li class="dropdown-item dropdown">
        <a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Girls</a>
        <ul class="navbarDropdown2" aria-labelledby="navbarDropdown2">
          <li class="dropdown-item dropdown"><a href="/Apparel/Girls/Shoes/10015">Shoes</a></li>

        </ul>
      </li>
      <li class="dropdown-item dropdown"><a class="dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Boys</a>
        <ul class="navbarDropdown2" aria-labelledby="navbarDropdown2">
          <li class="dropdown-item dropdown"><a href="/Apparel/Boys/Pants/10019">Pants</a></li>

        </ul>
      </li>

    </ul>

希望对你有帮助。