Why do my other nav links affect the ones with drop downs? - html

Question

I can't seem to find out why my nav links without dropdowns are affecting the ones that have them. They don't share a same class so that's not the issue.
I made sure in the CSS file to target the drop down links correctly. I feel like I'm missing something rather obvious here. For your viewing 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>Home</li>
<li>Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Nature</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>

Answer 1

Change this
.dropdown:hover li .menu {
display: block;
float: none;
}
to this
.dropdown li:hover .menu {
display: block;
float: none;
}
Snippet
.dropdown li .menu {
display: none;
}
.dropdown li:hover .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>Home</li>
<li>Collections
<ul class="menu">
<li>Autos</li>
<li>Models</li>
<li>Nature</li>
<li>Extreme Sports</li>
</ul>
</li>
<li>About me</li>
<li>Get in touch
<ul class="menu">
<li><i class="fas fa-envelope fa-2x" data-toggle="tooltip" title="Email me!"></i></li>
<li><i class="fab fa-twitter fa-2x" data-toggle="tooltip" title="Tweet me!"></i></li>
<li><i class="fab fa-instagram fa-2x" data-toggle="tooltip" title="Message me!"></i></li>
</ul>
</li>
</ul>
</div>