悬停状态

Question

我正在尝试在移动视图中为我的导航创建一个下拉列表。我遇到锚点重叠的问题。我试图通过将显示设置为阻止并添加边距底部来将它们叠加在一起。

这没有效果，你可以看到。

HTML

  <div id="brand">
    <h1>brand</h1>
    <nav>
      <div class="fa fa-plus"></div>
      <div class="fa fa-cog">
        <a href="#">Edit Profile</a>
        <a href="#">Dashboard</a>
      </div>
      <div class="fa fa-sign-out"></div>
      <input type="search" id="main-q" name="q" placeholder="Search" data-value="" value="">
    </nav>
  </div>

CSS

nav .fa a {
  display: none;
}

nav .fa:hover a {
  display: block;
  position: absolute;
  top: 75px;
  color: black;
  margin-bottom: 1em;
}

#brand {
  border-bottom: 1px solid #B2B2B2;
  background: white;
  color: darkgrey;
  padding: 1em;
}

#brand h1 {
  margin-bottom: .5em;
  float: left;
}

jsfiddle demonstration

解决方案是什么？

Answer 1

一切都很好。主要问题是为position: absolute设置a。只需将这些锚点a包裹在UL li中，然后设置UL的位置即可。

CSS：

nav .fa .child { /*modified CSS*/
  display: none;
  border:1px solid red;
  }

nav .fa:hover .child { /*modified CSS*/
  display: block;
  position: absolute;
  top: 75px;
  color: black;
  margin-bottom: 1em;
}

HTML

<div class="fa fa-cog">
    <ul class="child"> <!--class child for dropdown-->
        <li><a href="#">Edit Profile</a></li>
        <li><a href="#">Dashboard</a></li>
    </ul>
</div>

<强> JSFIDDLE