为什么我的其他导航链接会影响带有下拉菜单的链接？

Question

我似乎无法找出为什么我没有下拉菜单的导航链接会影响有下拉菜单的链接。他们不共享相同的 class，所以这不是问题。

我确保在 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 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><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>

为什么我的其他导航链接会影响带有下拉菜单的链接？

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

html

css

zurb-foundation