Question

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

我确保在CSS文件中正确定位下拉链接。我觉得我在这里错过了一些相当明显的东西。为了您的观赏乐趣：JSFiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: