html - 表格行中的简单纯 css 滑出按钮

Question

我正在尝试在表格中构建一个简单的滑出按钮。我的 CSS 很糟糕，现在已经失败了几个小时。

JSFiddle带有相关代码。

这是表格中最后一个 td 的 html:

<td class="actions">
  <div class="actions-menu-box">
    <a>x</a>
    <ul>
      <li>copy</li>
      <li>paste</li>
      <li>run</li>
    </ul>
  </div>
</td>

我正在使用 visibility 属性通过 react 隐藏和显示 ul。单击链接会更改状态，并将 visibility 设置为可见、隐藏。这有点管用，我现在唯一真正需要弄清楚的是如何让这个人排队。

我失败的尝试之一:

td.actions{
    width: 80px;
    text-align: center;
}
.actions-menu-box{
    a {
        display: block;
        width: 100%;
        height: 100%;
        position:relative;
        vertical-align: middle;
    }
    ul{
        position: absolute;
        display: block;
        margin: 0px;
        right: 80px;
        padding: 0px;
        border-left: 1px solid #999999;
        background-color: #fafafa;
        li{
            list-style-type: none;
            display: inline-block;
            padding: 10px 10px;
        }
    }
}

这就是它目前的对齐方式，点击了顶部链接:

我希望它的显示方式是覆盖相应的行并很好地对齐。

我有点理解为什么会这样，但我一直在用绝对位置和相对位置的不同设置来对抗它......

有人可以给我指明正确的方向吗，也许是在线教程？暂时不需要滑动我需要先了解定位。

Answer 1

你能做一个 JS fiddle 吗？将更容易帮助您，然后您可以看到解决方案。

没有 fiddle ，我认为您的操作菜单框类应该是position:relative的。然后 UL 将相对于使用 top 和 left 的 TD，您应该能够将菜单定位在正确的位置。

 .actions-menu-box{position:relative; ul {position:absolute;top:0;left:0;}}

将其添加到您的 css 中应该会有所帮助，然后使用 px 中的顶部和左侧数量来移动您的菜单