为什么我的其他导航链接会影响下降的链接？

Question

我似乎无法找出为什么没有下拉列表的导航链接会影响那些拥有它们的导航链接.他们不共享同一个班级,所以这不是问题.

我确保在CSS文件中正确定位下拉链接.我觉得我错过了一些相当明显的东西.为了您的观赏乐趣: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>

Answer 1

改变这个

.dropdown:hover li .menu {
  display: block;
  float: none;
}

对此

.dropdown li:hover .menu {
  display: block;
  float: none;
}

片段

.dropdown:hover li .menu {
  display: block;
  float: none;
}

.dropdown li:hover .menu {
  display: block;
  float: none;
}