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

您不能转换显示。尝试转换 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 */
}