Now, my problem is that I can't lock all my menus to the same height, it needs to be dynamic with content. Also, I'm not quite sure why I'm needing to use 26ems for the negative margin to create the animation. I was hoping -100% would work, but it doesn't. Anyone done this effect successfully before?

dresden_phoenix
—
2012-12-24T19:54:10Z —
#2

That is because margins, even vertical ones, are calculated based on the WIDTH of the container. Yeah, that's nuts, but it's true.

also note that in order to use top|bottom |left|right and/or z-index you must give the elememt position:relative|absolute|fixed

Michael_Morris1
—
2012-12-24T20:11:09Z —
#3

So, it's impossible then since the width is static and the height dynamic. Is this spec or just a popular bug?

dresden_phoenix
—
2012-12-24T23:40:12Z —
#4

It's the spec and ,yes, it would be impossible using vertical margins. You could position the child element out of view, using position:relative, of course the parent would remain open, and you would have to approach this from a completely different angle as far as CSS and HTML are concerned.

PaulOB
—
2012-12-26T11:54:12Z —
#5

Hi,

I'd just give it a margin bigger than you will ever need. The slight delay will actually enhance the menu and stop it being triggered accidentally when hovering much like the js hover-intent plugin.:)

I actually considered that for awhile, but some of the menus are much larger than the others so the delay wouldn't be consistent. For the moment I've went with a fade in / out effect instead and may revisit it later.