CSS issues with menu height increase when freezing

Question

I am trying to create a horizontal menu that grows 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.

#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; } 

 <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> </div> 

Here is the gif daemon that I want to do:

Answer 1

Check out this example: its similar to what you want ...

Link

Answer 2

I added this code to yours to make it animated:

 -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; 

Here is the fiddle:

http://jsfiddle.net/Hive7/7HS8p/

Answer 3

Something like that?

jsFiddle demo here

 -webkit-animation: move .5s; -webkit-animation-fill-mode: forwards; @-webkit-keyframes "move" { 100% { height:80px; } }