CSS Problems with increasing menu height on hover

CSS Problems with increasing menu height on hover

I'm new to CSS and this is my first time using Stackoverflow. I've
searched for a solution to my problem but I can't find one. I really like
the Stackoverflow community and I hope I can get my solution here.
I'm trying to create a horizontal menu that increases in height and
displays a vertical list when you hover over it. If there is a way to make
a smooth transition when the menu increases in height- that would be nice
too.
Here's is a Jsfiddle attempt (Apologies for newbie code)
HTML
<div id="nav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
CSS
#nav {
width:100%;
height:20px;
background-color:#989898;
}
#nav:hover {
height:80px;
}
#nav li {
display:inline;
padding:15px;
}
#nav a {
color:black;
text-decoration:none;
}
Here's a gif demonstration of what I want to do
Thanks for reading this. :)