html - 在悬停状态下重叠 anchor

Question

我正尝试在我的移动 View 中为我的导航创建一个下拉菜单。我遇到 anchor 重叠的问题。我试图通过将显示设置为 block 并添加边距底部来将它们堆叠在一起。

如您所见，这并没有奏效。

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

一切都很好。主要问题是为a 设置position: absolute。只需将这些 anchor 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