Multilevel dropdown not able to implement using on hover and bootstrap

Question

I'm new to css and trying to create a multilevel dropdown. When I click on the Apparel link, everything under it opens at the same time. I tried with display: none and display: block on hover but, it is not working. Can anyone guide me on this.

 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

Be careful with the class names the first hover dropdown's class name was dropdown-toggle not dropdown

Also a codepen link -> 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> 

Hope it helps you.