html - 内容后面的 CSS 下拉菜单

Question

我正在尝试创建一个评论列表并提供一个下拉菜单，其中包含针对每个评论的操作。

我遇到了下拉菜单位于下一条评论文本后面的问题。看看当您将鼠标悬停在评论上时，您会看到 3 个菜单点出现，将鼠标悬停在这些点上，菜单将在第二条评论后面展开。

几个小时以来，我一直在处理元素的 z-index、不透明度和位置问题，结果碰壁了。可以用其他人的眼睛看看我错过了什么......我知道这必须很简单

.post-comment {
    display: flex;
    flex-flow: row nowrap;
    margin: 20px 0;
    min-height: 40px;
}

.post-comment:hover > .options > button {
    display: block;
}

.post-comment > .options {
    margin: 0 0 0 20px;
    min-width: 45px;
    position: relative;
    z-index: 1;
}

.post-comment > .options > button {
    border: none !important;
    background-color: rgba(0,0,0,0) !important;
    min-width: 45px;
    display: none;
}

.post-comment > .options > button > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: block;
    background-color: #727272;
    margin: 2px;
}

.post-comment > .options > div {
    display: none;
    position: absolute;
    z-index: 999;
}

.post-comment > .options > div > a {
    padding: 10px 5px;
    border: 1px solid #d5d5d5;
    color: #535353 !important;
    font-size: 14px;
    display: block;
}

.post-comment > .options > div > a:hover {
    background-color: #f6f6f6;
}

.post-comment > .options > button:hover {
    cursor: pointer;
}

.post-comment > .options > button:hover > span {
    background-color: #505050;
    cursor: pointer;
}

.post-comment > .options > button:hover + div, .post-comment > .options > div:hover {
    display: block;
}

<div class="post-comment">
  <div>
      Author 2 hour ago<br/>
      Some juicy content. Some juicy content. Some juicy content. 
  </div>
  <div class="options">
    <button>
      <span></span><span></span><span></span>
    </button>
    <div>
      <a href="#1">Option1</a>
      <a href="#2">Option2</a>
    </div>
  </div>
</div>
<div class="post-comment">
  <div>
      Author 2 hour ago<br/>
      Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. 
  </div>
  <div class="options">
    <button>
      <span></span><span></span><span></span>
    </button>
    <div>
      <a href="#1">Option1</a>
      <a href="#2">Option2</a>
    </div>
  </div>
</div>

Answer 1

你不需要z-index，只需将background-color添加到你的div

.post-comment {
    display: flex;
    flex-flow: row nowrap;
    margin: 20px 0;
    min-height: 40px;
}

.post-comment:hover > .options > button {
    display: block;
}

.post-comment > .options {
    margin: 0 0 0 20px;
    min-width: 45px;
    position: relative;
    z-index: 1;
}

.post-comment > .options > button {
    border: none !important;
    background-color: rgba(0,0,0,0) !important;
    min-width: 45px;
    display: none;
}

.post-comment > .options > button > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: block;
    background-color: #727272;
    margin: 2px;
}

.post-comment > .options > div {
    display: none;
    position: absolute;
    z-index: 999;
}

.post-comment > .options > div > a {
    padding: 10px 5px;
    border: 1px solid #d5d5d5;
    color: #535353 !important;
    font-size: 14px;
    display: block;
}

.post-comment > .options > div > a:hover {
    background-color: #f6f6f6;
}

.post-comment > .options > button:hover {
    cursor: pointer;
}

.post-comment > .options > button:hover > span {
    background-color: #505050;
    cursor: pointer;
}

.post-comment > .options > button:hover + div, .post-comment > .options > div:hover {
    display: block;
}
.options > div {
  background-color: #ffffff;
}

<div class="post-comment">
  <div>
      Author 2 hour ago<br/>
      Some juicy content. Some juicy content. Some juicy content. 
  </div>
  <div class="options">
    <button>
      <span></span><span></span><span></span>
    </button>
    <div>
      <a href="#1">Option1</a>
      <a href="#2">Option2</a>
    </div>
  </div>
</div>
<div class="post-comment">
  <div>
      Author 2 hour ago<br/>
      Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. Some juicy content. 
  </div>
  <div class="options">
    <button>
      <span></span><span></span><span></span>
    </button>
    <div>
      <a href="#1">Option1</a>
      <a href="#2">Option2</a>
    </div>
  </div>
</div>