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

Question

正如标题所示，我正在尝试让一个 div 出现在 anchor 悬停时。我正在使用伪元素在 div 上方显示一个“三 Angular 形”。

而不是在这里发布代码，

link to it

这是 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>

抱歉所有的 css 我正在使用 sass 所以只是将它反编译成 css。

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

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

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

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

基本上，无论父文本或内容如何，​​框都必须始终居中绘制

即:

                  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 */
}