Negative margin percent not working as expected

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>

Less

&.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;
    }
}

I'm trying to get a middle aligned drop right but the margin-top isn't working as expected. I expect the margin-top to be half its height. But no matter what any other value is (I have changed the left and height), margin-top remains as -109.75px. Here is an example of the computed values.

Computed Values

After doing a little bit of digging, I found this [link](http://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-or-parent-container). So it seems margin top and bottom aren't relative to height. I still world like to know where it is getting the 109.75px from though. — Fallen, Jul 20 '14 at 18:45
The margin is calculated as a percentage of the width of the parent element. — Guffa, Jul 20 '14 at 18:47

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

I found the solution here. I ended up replacing margin-top: -50%; with transform: translate(0, calc(-50% + 25px));. 25px being the height of the item you hover over to cause the dropdown. Now I have an almost completely centered drop right.

edited May 23 '17 at 12:13

Community

1
1

answered Jul 20 '14 at 19:29

Fallen

196
3
10

Negative margin percent not working as expected

1 Answers1