I have a CSS slide down menu that can vary in the number of elements displayed.

I use an `overflow: hidden` wrapper and `margin-top: -100%` to hide the menu, and a CSS transition with `margin-top: 0` to animate the slide down.

The problem appears to be that `margin-top: -100%` seems to be picking up the explicit `width` of any parent element and ignoring the content height.

```css
.outer {
  overflow: hidden;
  border: 10px solid red;
  cursor: pointer;
}
.outer > .slide {
  margin-top: -100%;
  transition-property: margin-top;
  transition-duration: 1s;
}
.outer:hover > .slide {
  margin-top: 0;
}
.outer.bug {
  width: 100px;
}
```

```html
<div class="outer">
  <div class="slide">
    <ul>
      <li>
        Ayy
      </li>
      <li>
        Bee
      </li>
      <li>
        See
      </li>
      <li>
        Dee
      </li>
      <li>
        Eee
      </li>
      <li>
        Eff
      </li>
      <li>
        Gee
      </li>
    </ul>
  </div>
</div>

<div class="outer bug">
  <div class="slide">
    <ul>
      <li>
        Ayy
      </li>
      <li>
        Bee
      </li>
      <li>
        See
      </li>
      <li>
        Dee
      </li>
      <li>
        Eee
      </li>
      <li>
        Eff
      </li>
      <li>
        Gee
      </li>
    </ul>
  </div>
</div>
```

Run that snippet and you should see two red boxes, mouse over either to get the slide down menu.

The problem is the second box - the only difference is that the parent has `width: 100px;` set. 

If you inspect the second box you should see that the `margin-top: -100%;` has been calculated as -100px. 

In fact any explicit or inherited width against the parent div will become the negative margin.

The only way I've found round it is to explicitly set the `margin-top` to be the same as the height of the sliding menu, but that involves DOM layout and JS that I don't really want to do for each menu.

Is this a bug in how browsers handle negative percentages on margin-top? IE11, Chrome and FX all seem to treat it the same way.

Is there a better way around it that doesn't require an explicit height calculation and additional Javascript?