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>

标签： htmlcss

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>