多级下拉菜单无法在悬停和引导程序上使用

Question

我是CSS的新手，正在尝试创建一个多级下拉列表。当我单击“服装”链接时，它下面的所有内容都会同时打开。我尝试使用display：none和display：在悬停时阻止，但是它不起作用。谁能在这方面指导我。

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

还有一个codepen链接-> 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>

希望它对您有帮助。