多級下拉菜單無法使用引導程序以及在懸停時實現

Question

 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：block和display：none，但是它不起作用。

有人可以在這方面指導我嗎。 如果有人能為我提供這方面的見解，我將不勝感激。

Answer 1

我認為這就是您想要的。 如果您要查找的是問題，那就是您在.navbar-nav元素上調用了懸停，這意味着所有secondDropdown類都被此修改，因為它們都是navbar的后代。 解決方案將.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>