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

看看这个例子：它类似于你想要的......

关联