负利润百分比未达到预期效果

Question

HTML

<nav class="dropdown">
    <a href="#css">CSS</a>
    <section class="drop-right align-middle">
        <a href="#grid">grid</a>
        <a href="#typography">typography</a>
        <a href="#code">code</a>
        <a href="#tables">tables</a>
        <a href="#forms">forms</a>
        <a href="#buttons">buttons</a>
        <a href="#images">images</a>
    </section>
</nav>

少

&.dropdown {
    position: relative;
    > section {
        position: absolute;
        display: none;
        min-width: 14rem;
        background: @matteBlack;
        &.drop-right {
            left: 100%;
            top: 0;
            &.align-middle {
                margin-top: -50%;
            }
        }
        .clear();
    }
    &:hover {
        > section {
            display: block;
        }
    }
}
.clear() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

我正试图让中间对齐的下降，但是margin-top没有按预期工作。我预计保证金最高点是其高度的一半。但无论其他任何值是什么（我已经改变了左边和高度），margin-top仍为-109.75px。以下是计算值的示例。

Answer 1

我找到了解决方案here。我最终将margin-top: -50%;替换为transform: translate(0, calc(-50% + 25px));。 25px是您悬停在其上的项目的高度以导致下拉列表。现在我有一个几乎完全居中的下降权。