Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)

Question

I\'d like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover.

The caveat being that I wish to keep dynamic (auto)

Answer 1

You should use scaleY.

HTML:

Here (scaleY(1))

  
Coffee
  
Tea
  
Milk

CSS:

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

I've made a vendor prefixed version of the above code on jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/