内容后面的CSS下拉菜单

Question

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

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

我已经弄乱了元素的z索引，不透明度和元素位置几个小时了，而现在却碰壁了。可以用其他眼睛看我想念的东西...我知道它必须很简单

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