CSS hover triggered vertical sliding animated header - css

Question

I wanting a header bar that slides vertically into view from negative top.
Rather than simply appears as if being behind a curtain.
The following is animated using height :-
https://jsfiddle.net/AaronNGray/kf0br46u/31/
HTML
<div id="box">
<div id="content">AaronNGray</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
width: auto;
background: transparent;
transition: all 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
height: 0px;
transition: all 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 50px;
top: 0px;
}
What I need is to be able to animate top so the content div slides downwards from off the top of the screen.
This is what I have tried but it does not work :-
https://jsfiddle.net/AaronNGray/kf0br46u/40/
body {
margin: 0px;
padding: 0px;
}
#box {
height: 100px;
top: -50px;
width: auto;
background: transparent;
transition: top 0.4s ease-in-out;
}
#content {
overflow: hidden;
width: auto;
background: white;
top: -50px;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
-webkit-transition: top .8s ease;
-moz-transition: top .8s ease;
-ms-transition: top .8s ease;
-o-transition: top .8s ease;
}
#box:hover > #content {
top: 0px;
}
Hope you can help and its probably something simple I am missing, usually is :)

Answer 1

There are a couple of problems.
First, positioning with e.g. top does not work if the element's position is not defined (and if it is, the positioning is in relation to the first ancestor which itself is positioned).
Second, the box element is positioned at -50px (half its height) which is fine, but the content is put -50px which would put it at -100px (if it were positioned at all).
Here's a snippet with your code with these two things altered:
body {
margin: 0px;
padding: 0px;
position: relative;
}
#box {
height: 100px;
top: -50px;
width: auto;
transition: top 0.4s ease-in-out;
position: relative;
}
#content {
overflow: hidden;
position: relative;
top: 0px;
width: auto;
height: 50px;
transition: top 0.4s ease-in-out;
border-bottom: 2px solid black;
}
#box:hover #content {
top: 50px;
}
<div id="box">
<div id="content">AaronNGray</div>
</div>

Answer 2

StackOverflow has a monopoly on Google and the Internet and is abusing this by stopping people asking questions that they really need to ask in order to do their work. You may regard this question as stupid but theres no where else you cn get CSS answers anymore you have killed off all the other CSS forums !!!!!