多級下拉菜單無法在懸停和引導程序上使用

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 not 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> 

希望對您有幫助。