向CSS菜单添加下拉转换

Question

我想添加一个-webkit转换：所有1s轻松；或者类似的东西，我的CSS下拉菜单，但是我一辈子都不知道把它放在哪里，这样它才能正常工作。我已经把它放过一次，直接放在第一个.nav规则的样式中，在这个规则中，超级下拉存在。

.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
-webkit-transition: all 1s ease;
background: #fff;
padding: 20px 20px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
 }

但它不起作用。

如果有人也可以建议我，如果我已经把z索引放在css的正确位置。我已将其放置为

 #sidebar{
 position:relative;
 z-index:-1;
 }

直接在下拉菜单开始之后和位置样式之后。这是放它的正确地方吗？

我需要它来阻止我的图像显示在菜单的下拉列表前，但由于我的文件主机（谷歌）目前不允许我访问共享链接，我还无法测试它。

这是代码：http://cdpn.io/lznko

任何经过测试的示例和解决方案都非常受欢迎。

Answer 1

.nav > li > div{
    height: 0;
    overflow: hidden;
    -webkit-transition: height 200ms linear;
    -moz-transition: height 200ms linear;
    -ms-transition: height 200ms linear;
    -o-transition: height 200ms linear;
    transition: height 200ms linear;
}
.nav > li:hover > div{height: 200px;}

Answer 2

尝试添加以下样式：

.nav > li > div{
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 300ms;
}
.nav > li:hover > div{
  height: 100px;
  opacity: 1;
}

一般规则：避免隐藏应该设置动画的元素。请改用不透明度和/或高度。