html - ホバー時のメニューの高さの増加に関する 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 のデモはこちら

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

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

Answer 3

この例をチェックしてください: あなたが望むものに似ています...

リンク