Sub-menu :before transition - html

Question

I am trying to implement a submenu with a border-left looking bar that transitions in height from 0 to 100% upon hover of the main nav element. For some reason the transition is not working. Any help?
http://codepen.io/matthewmorrisux/pen/addLZE?editors=110
<div class="container">
<nav class="menu">
<ul>
<li class="menu__item">Home</li>
<li class="menu__item">About<ul class="sub-menu">
<li class="sub-menu__item">Item 1</li>
<li class="sub-menu__item">Item 2</li>
<li class="sub-menu__item">Item 3</li>
</ul></li>
<li class="menu__item">Process</li>
<li class="menu__item">Contact</li>
</ul>
</nav>
</div>
.menu {
position: relative;
}
.menu__item {
position: relative;
display: inline-block;
padding: 20px;
}
.sub-menu {
position: absolute;
display: none;
}
.sub-menu:before {
content: '';
display: block;
position: absolute;
width: 2px;
height: 0px;
background: black;
transition: height 1s ease;
}
.menu__item:hover .sub-menu {
display: block;
}
.menu__item:hover .sub-menu:before {
content: '';
display: block;
position: absolute;
width: 2px;
height: 100px;
background: black;
transition: height 1s ease;
}

Answer 1

You are using the display property to toggle the visibility between none and block, this does not work well with transitions.
Instead, try hiding the menu and its content by setting the height to 0:
.sub-menu {
position: absolute;
display: block;
height: 0;
overflow: hidden;
}
Then your .sub-menu also needs a height:
.menu__item:hover .sub-menu {
display: block;
height: 100px;
}
http://codepen.io/anon/pen/addLPR?editors=110