It seems I can’t understand why my navigation links without drop-down lists affect the ones they have. They do not have one class, so no problem.
I made sure that the CSS file targets the dropdowns correctly. I feel like I'm missing something pretty obvious here. For your pleasure: JSFiddle
.dropdown li .menu { display: none; } .dropdown:hover li .menu { display: block; float: none; }
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <div class="dropdown"> <ul class="menu dropdown menu-hover-lines" data-dropdown-menu> <li><a href="#">Home</a></li> <li><a href="#">Collections</a> <ul class="menu"> <li><a href="#">Autos</a></li> <li><a href="#">Models</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Extreme Sports</a></li> </ul> </li> <li><a href="#">About me</a></li> <li><a href="">Get in touch</a> <ul class="menu"> <li><a href="#"><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></a></li> <li><a href="http://twitter.com"><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></a></li> <li><a href="http://instagram.com"><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></a></li> </ul> </li> </ul> </div>
source share