CSS悬停时增加菜单高度的问题

Question

我正在尝试创建一个高度增加的水平菜单，并在将鼠标悬停在其上时显示垂直列表。如果有一种方法可以在菜单高度增加时进行平滑过渡，那也很不错。

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

以下是我想要做的gif演示：

Answer 1

我将此代码添加到您的代码中以使其具有动画效果：

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

这是一个小提琴：

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

Answer 2

这样的东西？

jsFiddle demo here

-webkit-animation: move .5s;
-webkit-animation-fill-mode: forwards;

@-webkit-keyframes "move" {
 100% {
   height:80px;
 }
}

Answer 3

看看这个例子：它与你想要的相似......

<强> Link