html - 尝试使用绝对位置使 div 出现在悬停时。需要帮助使其居中

Question

正如标题所示，我试图让 div 出现在锚点的悬停上。我正在使用伪元素在 div 上方显示一个“三角形”。

而不是在这里发布代码，

链接到它

这是HTML：

<ul>
    <li class="menu__item has-sub">
        <a href="javascript:void(0);">Parent</a>
        <ul class="menu menu__sub">
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 1</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 2</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 3</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 4</a></li>
            <li class="menu__item"><a href="javascript:void(0);">item 1 child 4</a>/li>
    </ul>
</li>
</ul>

对不起，我正在使用 sass 的所有 css，所以只是将它反编译成 css。

我的问题是我无法让容器始终以父项为中心，因为我使用的是绝对定位和右/左 hack 来定位它。

我不知道如何正确地做到这一点，所以如果有人能帮助我，我会爱你很久！

此外，如果您需要我清理 css，我会尝试使用 81 行，但我想展示完整的图片。

• 编辑澄清：我需要框始终位于父文本的中心（在本例中为父文本），但如果父文本更改为 asdfasdfasdf 我需要框也居中。

基本上，无论父文本或内容如何，​​必须始终将框画在中心

IE：

                  Some Long Text Here
                   -------^-------
                   |   Content   |
                   |   Content   |
                   |   Content   |
                   ---------------

                       Text
               ----------^-----------
               |   Longer Content   |
               |   Longer Content   |
               |   Longer Content   |
               ----------------------

Answer 1

为父项添加宽度

.menu__item > a {
    color: black;
    display: block;
    font-style: normal;
    font-weight: normal;
    line-height: 3;
    text-transform: uppercase;
    text-align: center; /* add this */
    width: 165px; /* And this (this width should be same as .menu__sub class' width)*/
}

移除 right 属性并添加 0 padding left 和 margin

.menu__sub {
    background-color: white;
    max-height: 100px;
    overflow: hidden;
    position: absolute;
    text-align: center;
 /* remove right */
    width: 165px;
    padding-left: 0; /* Add this */
    margin: 0 auto; /* and this */
}

Answer 2

在您的.menu__item班级中，您只需要删除display: inline-block并添加text-align: center;

在您.menu-sub中，您需要将左右都设置为零left: 0; right: 0;并添加text-align: center以使其居中；

提琴手