How to add a CSS3 transition to a child element when the parent is hovered

<div class="parent">Parent
    <div class="child">Content</div>
.parent {
    background: red;

.child {
    overflow: hidden;
    height: 0;
    background: blue;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    color: white;

.parent:hover > .child {
    height: 30px;
    display: block;
add comment
Suggest a different solution or add another example