多级下拉菜单无法使用引导程序以及在悬停时实现

时间：2018-10-30 20:42:42

标签： html css twitter-bootstrap 

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;
}
<div class="collapse navbar-collapse" id="navbarNav">
  <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="" 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="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Boys/Pants/10019">Pants</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">Women</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Women/Dresses/10001">Dresses</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">Men</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Men/Jackets/10009">Jackets</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Electronics </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">Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Grocery </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">Dairy</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Health </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">Medicine</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home &amp; Furnishing </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">Bath Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Newsletters &amp; Magazines </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">Magazines</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

您好，我是CSS和Bootstrap的新手。我正在尝试使用CSS和Bootstrap 4实现多级下拉菜单。但是，我发现了一个特定的错误。每当我单击列表中的项目时，所有项目都会同时打开。我已经在FIDDLe中共享了我的代码。我不知道我在哪里弄错了。我已经尝试过使用display：阻止和display：none，但是它不起作用。

有人可以指导我吗？如果有人可以向我提供有关此方面的见解，我将不胜感激。

1 个答案:

答案 0 :(得分：0)

我认为这就是您想要的。如果您要查找的是问题，那就是您在.navbar-nav元素上调用了悬停，这意味着所有secondDropdown类都已被此类修改，因为它们都是导航栏。解决方案将.navbar-nav:hover更改为.dropdown:hover 

ul {
  list-style-type: none
}

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

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

.navbarDropdown2 {
  display: none;
}

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

.dropdown-item:hover ul {
  display: block;
}
<div class="collapse navbar-collapse" id="navbarNav">
  <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="" 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="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Boys/Pants/10019">Pants</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">Women</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Women/Dresses/10001">Dresses</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">Men</a>
          <ul class="" aria-labelledby="navbarDropdown2">
            <li class="dropdown-item dropdown"><a href="/Apparel/Men/Jackets/10009">Jackets</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Electronics </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">Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Grocery </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">Dairy</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Health </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">Medicine</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home &amp; Furnishing </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">Bath Accessories</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Newsletters &amp; Magazines </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">Magazines</a>
          <ul class="" aria-labelledby="navbarDropdown2"></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

相关问题
最新问题