0

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

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

4

2 回答 2

2 
.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;}
于 2013-08-14T14:18:47.487 回答
1

尝试添加以下样式：

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

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

于 2019-07-10T21:59:32.593 回答