Question

我想添加一个-webkit-transition：all 1s easy;或类似的东西，到我的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;
}

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

向CSS菜单添加下拉转换

2 个答案: