Question

I was playing around with the new CSS3 transitions and I seem to have hit a little road block. I am using transitions to scale links being held within an unordered list, but this is creating some unwanted behaviour. It will be easier to just show you: http://jsfiddle.net/xARug/

Now everything is working as expected, however when the text scales up it must stretch the list upwards which makes the other links within it rise up a little bit. I’m looking for a way to “stick” the text to the bottom of their parent element. I tried using position:absolute but because it pulls the text out of flow it doesn’t seem to work.

What would be the best solution to this problem?

Answer 1

Try switching your floats to inline-block. The floated elements are changing position when one of them grows.

http://jsfiddle.net/xARug/1/

nav ul li{
    display: inline-block;
    padding-left:0.5em;
}