css - CSS 过渡不起作用

Question

我试图让导航栏中的子菜单出现过渡。但这行不通。我正在使用的 css 代码是这样的-

#navigation li ul {
   display: none; 
   width: auto;
   position: absolute;
   margin: 0;
   padding: 0;
   background-color: #F87217;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    display: block;
}

我怎样才能使过渡工作？

Answer 1

你不能过渡display。尝试转换height或opacity改为：

#navigation li ul {
   display: block; 
   width: auto;
   height: 0;
   opacity: 0; /* optional */
   /* other attributes */
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    height: auto;
    opacity: 1; /* optional */
}

Answer 2

当您使用 display none 时，该项目不会呈现......所以您将永远无法悬停它。正如Jan Dvorak所说，使用身高可能是一个更好的选择。但也不能悬停高度为 0 的项目。

我建议使用透明度。

#navigation li ul {
opacity: 0;
...
}
#navigation li:hover ul {
    opacity: 1;
}